Question

我已经创建了这个jsbin并演示了我的问题。

var textFromHTTPRequest = '<html>'
    + '<head>'
      + '<script>'
        + 'function myFunc() { alert("works"); }'
      + '</script>'
    + '</head>'
    + '<body>'
      + '<a href="#" onmouseover="myFunc()">test</a>'
    + '</body>'
  + '</html>';

// Parse the text to dom element.
var parser = new DOMParser();
var el = parser.parseFromString(textFromHTTPRequest, "text/html");

// Get the script and contents of body.
var menuBody = el.firstChild.querySelectorAll('body > *');
var menuScript = el.firstChild.querySelector('head script');

// Insert the script into current head tag.
document.head.appendChild(menuScript);

// Insert the contents of body into current body.
for (var i = 0; i < menuBody.length; ++i) {
  document.body.appendChild(menuBody[i]);
}

它正在复制的场景是使用Fetch来提取HTML文档。

代码解析文本，然后拉出正文内容。身体中的某些东西使用内联onmouseover。所以我还需要提取脚本标签。

但是onmouseover现在不起作用。

Uncaught ReferenceError: myFunc is not defined

但是如果你使用Chrome Inspector - 你可以看到确实添加了脚本。

（请不要过分担心为什么提取的网页会使用onmouseover，我无法提供帮助）

Answer 1

浏览器不会使用＆＃34;不是由hitself创建的脚本。

您有两个选择：

1-创建一个新脚本并使用其他.innerHTML

var menuScript = document.createElement('script');
menuScript.innerHTML = el.firstChild.querySelector('head script').innerHTML;

jsBin： http://jsbin.com/dejerolozu/1/edit?html,css,js,output

2-使用eval

您可以在该脚本上运行eval，否则浏览器不会对其进行全球化：

// Insert the script into current head tag.
eval(menuScript.textContent);

jsBin： http://jsbin.com/zuwolelozo/1/edit?html,css,js,output

Answer 2

我通过使用createElement并将脚本内容复制到其中来自行修复它。这样可行。那就是。

var menuScript = el.firstChild.querySelector('head script');

var script = document.createElement( 'script' );
script.innerHTML = menuScript.innerHTML;

// Insert the script into current head tag.
document.head.appendChild(script);

当脚本附加到head并从内联js调用时，函数未定义

2 个答案:

您有两个选择：