logo标签列表

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

javascripthtmlparsinghtml-parsing
9

我想将下面的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的宽度和高度属性。

请指定浏览器版本。 - Eric Herlitz
1
如果我使用 innerHtml，就无法使用 getElementById 等函数。代码将不会作为节点存在。 - Florent
1
请参见 https://dev59.com/bmsy5IYBdhLWcg3w6yUN 和 https://dev59.com/wWkv5IYBdhLWcg3wdQhT。 - bdrx
请查看此处链接：link。或者如果您可以使用jQuery：$(content); 您现在可以遍历您创建的DOM对象。 - Felix
请不要使用JQuery回复，谢谢。- 新标签建议 - kmoe
显示剩余5条评论
7个回答
1

试试这个

function toNode(iframeString) {
    var div = document.createElement('div');
    div.innerHTML = iframeString;
    iframeNode = div.getElementsByTagName('iframe')[0];
    return iframeNode;
}
0
0
试试这个。我在嵌入源代码中遇到了一个问题，即“//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以便简单地提供数据更改宽度和高度。 - Florent
@Florent 你是如何将数据传递到HTML中的？为什么不想使用PHP？ - mcphersonjr
0

如果你对将该元素添加到已经创建的其他元素中没有问题，只需尝试下面的代码。

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;
}
0
请使用以下代码：
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)
0
为什么不使用**<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

0
你可以在这里获取一个DomParser Polyfill： https://developer.mozilla.org/en-US/docs/Web/API/DOMParser 它基本上使用innerHTML将内容推入新文档中，因此您也可以在父元素上执行此操作。一旦读取和解析了innerHTML，您就可以使用父级的getElementById、getElementsByTagName、querySelector等方法。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接