如何將HTML字符串轉換爲HTML文檔？

我想將下面的HTML字符串轉換爲HTML文檔。下面的代碼適用於Firefox和Chrome，但不適用於其他瀏覽器（Opera，Safari，IE）。你可以幫我嗎？如何將HTML字符串轉換爲HTML文檔？

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的高度屬性。

來源

2014-02-13 Florent

你與parrent元素的innerHTML的嘗試？ –

請指定瀏覽器版本 –

如果使用innerHtml，我不能使用getElementById等函數。代碼不會作爲節點。 – Florent

使用HTML5：

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

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

創建後，您可以使用document.write編輯（）。

注：僅在最近的瀏覽器此功能

來源

2014-02-13 20:34:07 Delayer

試試這個。我確實對嵌入源有問題，如「//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>

來源

2014-02-17 17:57:09 mcphersonjr

我不想將我的iframe添加到我的文檔中，但我想讓我的iframe在文檔中提供數據更改我的iframe的寬度和高度只需 – Florent

@Florent如何將數據傳遞給html？爲什麼你不想使用PHP？ – mcphersonjr

剛剛嘗試下面的代碼，如果你沒有問題補充該元素在其他已創建。

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函數來創建一些PARAMS元素。實例功能：

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

來源

2014-02-21 10:44:04 Xdevelop

使用此代碼

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)

來源

2014-02-21 15:49:53 user3281733

你可以得到的DOMParser填充工具在這裏： https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

它主要使用innerHTML來推的東西到一個新的文件，所以你可以在父元素上也是這樣做的。一旦innerHTML被讀入並解析，你就可以使用父節點的getElementById，getElementsByTagName，querySelector等等。

來源

2014-02-28 14:41:26 PatAtCP

爲什麼不使用**<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

來源

2014-03-10 02:21:56

試試這個

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

來源

2014-03-12 13:28:47 acehko

如何將HTML字符串轉換爲HTML文檔？

回答

相關問題