DOMParser将<script>标记附加到<head>/<body>但不执行

Question

DOMParser将<script>标记附加到<head>/<body>但不执行

我试图通过DOMParser将字符串解析为完整的HTML文档,然后用处理过的节点覆盖当前页面.该字符串包含完整的标记,包括<!doctype>,<html>,<head>和<body>节点.

// parse the string into a DOMDocument element:
var parser = new DOMParser();
var doc = parser.parseFromString(data, 'text/html');

// set the parsed head/body innerHTML contents into the current page's innerHTML
document.getElementsByTagName('head')[0].innerHTML = doc.getElementsByTagName('head')[0].innerHTML;
document.getElementsByTagName('body')[0].innerHTML = doc.getElementsByTagName('body')[0].innerHTML;

Run Code Online (Sandbox Code Playgroud)

这是因为它成功地获取了已解析的HTML节点并在页面上呈现它们; 但是,解析后的字符串中<script>的<head>或<body>节点中存在的任何标记都无法执行= [.直接使用html标签进行测试(与head/ 相反body)会产生相同的结果.

我也尝试过使用.appendChild()而不是.innerHTML()改变:

var elementHtml = document.getElementsByTagName('html')[0];

// remove the existing head/body nodes from the page
while (elementHtml.firstChild) elementHtml.removeChild(elementHtml.firstChild);

// append the parsed head/body tags to the existing html tag
elementHtml.appendChild(doc.getElementsByTagName('head')[0]);
elementHtml.appendChild(doc.getElementsByTagName('body')[0]);

Run Code Online (Sandbox Code Playgroud)

有没有人知道将字符串转换为完整的HTML页面并将其中包含的javascript执行的方法？

如果有DOMParser的替代方案可以提供相同的结果(例如覆盖整个文档),请随时推荐它/他们=]

注意:
我使用它的原因与更简单的替代方法相反document.write(data)是因为我需要postMessage()在SSL下的IE回调中使用它; document.write()在IE中访问SSL页面时,在回调事件中被阻止,例如发布消息

Answer 1

mar*_*owb 9

你应该使用：

const sHtml = '<script>window.alert("Hello!")</script>';
const frag = document.createRange().createContextualFragment(sHtml)
document.body.appendChild( frag );

Run Code Online (Sandbox Code Playgroud)

Answer 2

new*_*rey 7

使用问题DOMParser()中描述的将正确设置页面<head>和<body>内容,但是需要做更多工作<script>才能执行任何现有标记.

这里的基本方法是<script>在设置内容后拉出页面中所有标签的列表,迭代该列表并动态创建包含现有标签内容的新 <script>标签,然后将新标签添加到页面中.

例:

// create a DOMParser to parse the HTML content
var parser = new DOMParser();
var parsedDocument = parser.parseFromString(data, 'text/html');

// set the current page's <html> contents to the newly parsed <html> content
document.getElementsByTagName('html')[0].innerHTML = parsedDocument.getElementsByTagName('html')[0].innerHTML;

// get a list of all <script> tags in the new page
var tmpScripts = document.getElementsByTagName('script');
if (tmpScripts.length > 0) {
    // push all of the document's script tags into an array
    // (to prevent dom manipulation while iterating over dom nodes)
    var scripts = [];
    for (var i = 0; i < tmpScripts.length; i++) {
        scripts.push(tmpScripts[i]);
    }

    // iterate over all script tags and create a duplicate tags for each
    for (var i = 0; i < scripts.length; i++) {
        var s = document.createElement('script');
        s.innerHTML = scripts[i].innerHTML;

        // add the new node to the page
        scripts[i].parentNode.appendChild(s);

        // remove the original (non-executing) node from the page
        scripts[i].parentNode.removeChild(scripts[i]);
    }
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，5 月前
查看次数：	2328 次
最近记录：	5 年，9 月前