Question

我想在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的“宽度”和“高度”属性。

Answer 1

试试这个

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

Answer 2

使用HTML5：

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

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

创建后，您可以使用document.write（）编辑它。

注意：此功能仅适用于最近的浏览器

Answer 3

试试这个。我的嵌入源确实存在“//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>

Answer 4

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

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;
}

Answer 5

使用此代码

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)

Answer 6

您可以在此处获取DomParser Polyfill： https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

它本质上使用innerHTML将东西推送到一个新文档中，因此您也可以在父元素上执行此操作。读入并解析innerHTML之后，您可以使用父级的getElementById，getElementsByTagName，querySelector等。

Answer 7

为什么不使用**<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

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

7 个答案: