Question

我正在为iframe准备内存中的HTML代码，当我使用append时它会执行代码。

html = $(parser.parseFromString($("#EHtml").val(), "text/html"));
js = '<script>' + $("#EJs").val() + '</script>';
html.find('body').append(js);

$("#EHtml").val()包含HTML代码并且append函数完成其工作但也执行代码。有什么想法吗？

Answer 1

您只需存储对代码字符串的引用，并执行以下两项操作之一：仅在以后要运行代码时执行追加交互，或者在要运行代码时运行eval(jsString)

Answer 2

在脚本标记之间插入脚本时显然会运行脚本，因为您的DOM已经完成加载。它会运行两次，因为你把它放在body里面所以当你的身体内容结束时，脚本再次运行！

所以你必须在iframe的头部设置你的脚本标签才会运行它只在你插入或重新加载时运行，而不是再次运行！

我不建议您使用eval()，因为用于脚本评估很危险，eval()基本上用于其他目的！

如果您不想再运行两次，请使用<script></script>代码运行您的脚本并将其放在head上。

var script = document.createElement('script');
script.innerHTML =  $("#EJs").val();
iframe.contentWindow.document.head.appendChild(script);

可能这会对你有帮助..

Answer 3

如果将[type]属性设置为任何古怪的东西，则不会执行脚本标记。

<script type="wacky/non-executing">
  console.log("This will not execute! You will not see this!");
</script>

Answer 4

尝试使用实体，例如

var encodeHtmlEntity = function(str) {
  var buf = [];
  for (var i=str.length-1;i>=0;i--) {
    buf.unshift(['&#', str[i].charCodeAt(), ';'].join(''));
  }
  return buf.join('');
};
html.find('body').append(encodeHtmlEntity(js));

追加和

var decodeHtmlEntity = function(str) {
  return str.replace(/&#(\d+);/g, function(match, dec) {
    return String.fromCharCode(dec);
  });
};
decodeHtmlEntity(html.find('body').val());

阅读。

Answer 5

以我需要的方式得到它。我试图添加脚本标签而不使用解决问题的方法 - 我的意思是我只是想添加标签。感谢每个人的投入 - 我从你的建议中得到了解决方案...... 最后，我可以追加到iframe，但它正在主页面上下文中执行。导致问题的原因是使用JQuery来执行追加...所以这里是：

frame = document.getElementById("frame");
out = (frame.contentWindow) ? frame.contentWindow : (frame.contentDocument.document) ? frame.contentDocument.document : frame.contentDocument;

out.document.open();
out.document.write(html.find('html')[0].outerHTML);//HTML added here

    //JS appended here
js=out.document.createElement('script');
js.innerHTML = 'js code here';
out.document.getElementsByTagName("body")[0].appendChild(js);


out.document.close();

我希望它对某人有用......

在为iframe准备html代码时附加<script>：不执行</script>

5 个答案: