How to convert an HTML string into an HTML document?

Question

I want to convert my HTML string below in an HTML document. The code below works fine on Firefox and Chrome but not in other browsers (Opera, Safari, IE). Can you help me?

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");

Thank you not to reply in JQuery.

I want to do exactly that, but in javascript

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

My main goal is to transform my HTML text in an HTML document in order to change the Width and Height properties of my iframe.

If I use innerHtml, I can not use functions such as getElementById. The code will not be as nodes. — Florent, Feb 13 '14 at 14:36
I have all the latest versions. But I also support older versions. — Florent, Feb 13 '14 at 14:38
See http://stackoverflow.com/questions/8227612/how-to-create-document-objects-with-javascript and http://stackoverflow.com/questions/10585029/parse-a-html-string-with-js — bdrx, Feb 13 '14 at 15:17
look here: [link](http://help.dottoro.com/ljssopjn.php). Or if jquery is an option: `$(content); ` You can now traverse through your created DOM object. — Felix, Feb 13 '14 at 15:30
Have you tried document.createElement() ? I think links commetned abovewould solve your question. — Allende, Feb 13 '14 at 15:40
innerHTML doesn't negate the use on getElementById. `var d = document.getElementsByTagName('div')[0]; d.innerHTML = 'Howdy!'; console.log(d.getELementById('new-element').innerText); //prints out 'Howdy!'` — PatAtCP, Feb 28 '14 at 14:43

score 1 · Answer 1 · answered Mar 12 '14 at 13:28

1

Try this

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

answered Mar 12 '14 at 13:28

acehko

31
2

score 0 · Answer 2 · answered Feb 13 '14 at 20:34

Using HTML5:

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

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

After create it, you can edit it using document.write().

Note: This function only in recent browser

mcphersonjr · Answer 3 · 2014-02-18T14:51:53.657

0

Try this. I did have a problem with the embed source as "//www.youtube.com/embed/ZnuwB35GYMY". But when you add "http:" so it is "http://www.youtube.com/embed/ZnuwB35GYMY", it worked. Tested in 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>

edited Feb 18 '14 at 14:51

answered Feb 17 '14 at 17:57

mcphersonjr

733
12
35

I do not want to add my iframe to my document, but I want to make my iframe in a document to provide data change Width and Height of my iframe simply – Florent Feb 18 '14 at 06:56
@Florent How are you passing your data to the html? And why are you not wanting to use php? – mcphersonjr Feb 18 '14 at 14:32

Xdevelop · Answer 4 · 2014-02-21T10:50:34.093

Just try the code below, if you haven't problem to add that element in other already created.

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

Div element with id = content:

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

Else you can use JavaScript function to create elements with some params. Example function:

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

score 0 · Answer 5 · answered Feb 21 '14 at 15:49

Use this code

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)

score 0 · Answer 6 · answered Feb 28 '14 at 14:41

You can get a DomParser Polyfill here: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

It essentially uses innerHTML to shove stuff into a new document, so you could just do that too on a parent element. Once the innerHTML is read in and parsed, you can then use the parent's getElementById, getElementsByTagName, querySelector, et al.

score 0 · Answer 7 · answered Mar 10 '14 at 02:21

Why don't you use **<object>** instead of frame/iframe. you can change the width and the height, say:

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

Is that what you mean .. Sorry, my English is not good :D

How to convert an HTML string into an HTML document?

7 Answers7

Linked