草庐IT

javascript - 为什么我会收到被阻止的脚本执行错误？

coder 2024-07-22 原文

我正在使用 http://cburgmer.github.io/rasterizeHTML.js/将 html 变成 Canvas 。当我将代码更改为:

var canvas = document.getElementById("save_image_canvas");
// rasterizeHTML.drawHTML('<div style="font-size: 20px;">Some <span style="color: green">HTML</span> with an image</div>', canvas);
rasterizeHTML.drawHTML(document.getElementById("mattes").innerHTML, canvas);

我在控制台中收到以下错误:

Blocked script execution in 'Mysite/Custom_App/' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

所有脚本和内容都位于同一台服务器上。

这里是完整的函数:

function common_screenshot()
{
  var canvas = document.getElementById("save_image_canvas");
  if (typeof(moulding_canvas) === "undefined")
  {
    canvas.height = parseInt($("#matte_canvas").height());
    canvas.width = parseInt($("#matte_canvas").width());
  }
  else
  {
    canvas.height = parseInt($("#moulding_canvas").height());
    canvas.width = parseInt($("#moulding_canvas").width());
  }
  canvas.style.backgroundColor = "#FFFFFF";

  var moulding_top = -1 * parseInt(document.getElementById("moulding_canvas").style.top);
  var moulding_left = -1 * parseInt(document.getElementById("moulding_canvas").style.left);

  console.log("top: " + moulding_top);
  rasterizeHTML.drawHTML(document.getElementById("mattes").innerHTML).then(function (renderResult) 
  {
    context.drawImage(renderResult.image, moulding_left, moulding_top);
  });
  var ctx = canvas.getContext('2d');
  ctx.drawImage(matte_canvas, moulding_left, moulding_top);
  if (typeof(moulding_canvas) !== "undefined")
  {
    ctx.drawImage(moulding_canvas, 0, 0);
  }
  var image = new Image();
    image.src = canvas.toDataURL("image/jpeg");
  return image;
}

从 rasterizeHTML 生成的图像在屏幕上显示时没有问题，但是当我调用 canvas.toDataURL 时，生成的图像全黑了。

最佳答案

根据错误消息判断，您使用的是基于 Webkit 的浏览器，很可能是 Chrome。此错误消息(引入 here )在 <iframe> 时显示。带有 sandbox attribute 的元素正在尝试运行 JavaScript(仅当在该属性中指定了 allow-scripts 时才允许)。查看 rasterizeHTML 源代码表明函数 createHiddenSandboxedIFrame()创建这样一个框架。它用于 calculateDocumentContentSize() ，文档的内容被复制到临时沙盒框架中以测量其大小。显然，该文件还包含一些 <script>标记和这些会导致错误(不是因为脚本来源，而是因为通常不允许使用脚本)。

现在您的代码不会调用 calculateDocumentContentSize()当然。它被函数调用 drawDocumentImage()由函数调用 doDraw()由函数调用 rasterizeHTML.drawDocument()由函数调用 rasterizeHTML.drawHTML() .最后，问题确实是:您传入的 HTML 代码包含 <script>标签。

鉴于在您绘制的 HTML 代码上执行脚本似乎不是本意(没有 executeJS 选项)，您应该能够简单地移动 <script>在其他地方标记，这样它们就不会在 mattes 中元素。如果那是不可能的，您仍然可以在源代码上运行一些正则表达式来删除所有脚本标签，例如:

var code = document.getElementById("mattes").innerHTML;
code = code.replace(/<\/?script\b.*?>/g, "");
rasterizeHTML.drawHTML(code, canvas);

编辑:内联事件处理程序，如 ondrop当然，属性也会触发该警告。您也可以删除这些:

code = code.replace(/ on\w+=".*?"/g, "");

请注意，这只会帮助您摆脱警告。我怀疑此警告是导致图像空白的原因 - 因此您可能需要再问一个问题。

关于javascript - 为什么我会收到被阻止的脚本执行错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24453898/

javascript为什么codecanvasrasterizeHTML

有关javascript - 为什么我会收到被阻止的脚本执行错误？的更多相关文章

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  3. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  4. ruby-openid:执行发现时未设置@socket - 2

    我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass

  5. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  6. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  7. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  8. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  9. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996？但是 4.2%2==0.2 - 2

    为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

  10. ruby - ruby 中的 TOPLEVEL_BINDING 是什么？ - 2

    它不等于主线程的binding，这个toplevel作用域是什么？此作用域与主线程中的binding有何不同？>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是，TOPLEVEL_BINDING始终引用Binding的预定义全局实例，而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层，它们都包含相同的绑定(bind)，但它们不是同一个对象，您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput

随机推荐