如何将 HTML 字符串转换为 HTML 文档？答案

【问题标题】：How to convert an HTML string into an HTML document?如何将 HTML 字符串转换为 HTML 文档？
【发布时间】：2014-03-12 11:46:57
【问题描述】：

我想将下面的 HTML 字符串转换为 HTML 文档。下面的代码在 Firefox 和 Chrome 上运行良好，但在其他浏览器（Opera、Safari、IE）上却不行。你能帮帮我吗？

var content = '<iframe width="640" height="360" src="//www.youtube.com/embed/ZnuwB35GYMY" frameborder="0" allowfullscreen></iframe>';

var parser = new DOMParser();
var htmlDoc = parser.parseFromString(content,"text/html");

感谢您不要在 JQuery 中回复。

我想这样做，但在 javascript 中

<?php
    $content = '<iframe width="640" height="360" src="//www.youtube.com/embed/ZnuwB35GYMY" frameborder="0" allowfullscreen></iframe>';
    $doc = new DOMDocument();
    $doc->loadHTML($content);
?>

我的主要目标是在 HTML 文档中转换我的 HTML 文本，以更改 iframe 的 Width 和 Height 属性。

【问题讨论】：

您是否尝试过使用父元素的 innerHtml ？
请指定浏览器版本
如果我使用innerHtml，我不能使用getElementById之类的函数。代码不会作为节点。
我有所有最新版本。但我也支持旧版本。
见stackoverflow.com/questions/8227612/…和stackoverflow.com/questions/10585029/…

标签： javascript html parsing html-parsing

【解决方案1】：

使用 HTML5：

var impl    = document.implementation,
    htmlDoc = impl.createHTMLDocument(title);

http://www.w3.org/TR/html5/dom.html#dom-domhtmlimplementation-createhtmldocument

创建后，您可以使用 document.write() 对其进行编辑。

注意：此功能仅在最近的浏览器中使用

【讨论】：

【解决方案2】：

试试这个。我确实对作为“//www.youtube.com/embed/ZnuwB35GYMY”的嵌入源有问题。但是当你添加“http:”所以它是“http://www.youtube.com/embed/ZnuwB35GYMY”时，它起作用了。在 Safari 中测试。

<html>
    <head>
        <script type="text/javascript">
            var width = window.innerWidth;
            var height = window.innerHeight;

            function write_iframe() {
            var content = '<iframe width="' + width + '" height="' + height + '" src="http://www.youtube.com/embed/ZnuwB35GYMY" ></iframe>';
            document.write(content);
            }
        </script>
   </head>
   <body onload="write_iframe()">
   </body>
</html>

【讨论】：

我不想将我的 iframe 添加到我的文档中，但我想在文档中制作我的 iframe 以简单地提供数据更改我的 iframe 的宽度和高度
@Florent 您如何将数据传递给 html？为什么你不想使用 php？

【解决方案3】：

如果您没有问题将该元素添加到其他已创建的元素中，请尝试以下代码。

window.addEventListener('load',function(){
    var content = '<iframe width="640" height="360" src="//www.youtube.com/embed/ZnuwB35GYMY" frameborder="0" allowfullscreen></iframe>';

    var e = document.getElementById("content");
    e.innerHTML += content;
},true);

带有id = content的Div元素：

<div id='content'></div>

否则，您可以使用 JavaScript 函数创建带有一些参数的元素。示例函数：

window.addEventListener('load',function(){
    var iframe = create_iframe_element("iframe",640,360,"//www.youtube.com/embed/ZnuwB35GYMY",0,true);
    var container = document.getElementById("content");
    container.appendChild(iframe);
},true);


function create_iframe_element(type,width,height,src,frameborder,allowfullscreen){
    var element = document.createElement(type);
    if (typeof src != 'undefined') {
        element.src = src;
    }
    if (typeof height != 'undefined') {
        element.setAttribute("height",height);
    }
    if (typeof width != 'undefined') {
        element.setAttribute("width",width);
    }       
    if (typeof frameborder != 'undefined') {
        element.setAttribute("frameborder",frameborder);
    }
    if (allowfullscreen) {
        element.setAttribute('allowfullscreen',allowfullscreen);
    } 
    return element;
}

【讨论】：

【解决方案4】：

使用此代码

var frm = document.createElement('iframe');
frm.setAttribute('width', 640);
frm.setAttribute('height', 360);
frm.setAttribute('src', '//www.youtube.com/embed/ZnuwB35GYMY');
frm.setAttribute('frameborder', 0);
frm.setAttribute('allowfullscreen', 'true');

//alert(frm.width);
//document.body.appendChild(frm);// Add the frame to the body (this must be executed after DOM is loaded)

【讨论】：

【解决方案5】：

你可以在这里得到一个 DomParser Polyfill： https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

它本质上是使用 innerHTML 将内容塞入一个新文档中，因此您也可以在父元素上执行此操作。读入并解析 innerHTML 后，您就可以使用父级的 getElementById、getElementsByTagName、querySelector 等。

【讨论】：

【解决方案6】：

为什么不使用**<object>** 而不是frame/iframe。你可以改变宽度和高度，比如：

<object **height="215" type="text/html" width="350"**><param name="movie" value="//www.youtube.com/v/EnVEERmbdpo?version=3&amp;hl=en_US" />

这就是你的意思.. 对不起，我的英语不好:D

【讨论】：

【解决方案7】：

试试这个

function toNode(iframeString) {
    var div = document.createElement('div');
    div.innerHTML = iframeString;
    iframeNode = div.getElementsByTagName('iframe')[0];
    return iframeNode;
}

【讨论】：