CODEWITHSUNDEEP
javascripthtmlparsinghtml-parsing
Florent
Florent

Reputation: 761

How to convert an HTML string into an HTML document?

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.

Upvotes: 9

Views: 4410

Answers (7)

acehko
acehko

Reputation: 31

Try this

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

Upvotes: 1

don magug
don magug

Reputation: 322

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

Upvotes: 0

PatAtCP
PatAtCP

Reputation: 587

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.

Upvotes: 0

user3281733
user3281733

Reputation: 111

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)

Upvotes: 0

Xdevelop
Xdevelop

Reputation: 206

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

Upvotes: 0

mcphersonjr
mcphersonjr

Reputation: 743

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>

Upvotes: 0

Delayer
Delayer

Reputation: 439

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

Upvotes: 0

Related Questions