编程语言
首页 > 编程语言> > javascript – DOMParser将标记附加到/但不执行

javascript – DOMParser将标记附加到/但不执行

作者：互联网

我试图通过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;

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

我也尝试过使用.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]);

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

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

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

解决方法:

使用问题中描述的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]);
    }
}

标签：javascript,domparser
来源： https://codeday.me/bug/20190728/1562931.html