javascript populate iframe, modify source in one

Question

Populating the contents of 2 iframes with the same HTML preview. Although for one of the iframes I need to modify the data/html by removing the images.

$.ajax({
    url: '',
    dataType: 'text',
    success: function(data) {
        if(data){
            var iframe = document.getElementById('preview');
            iframe.parentNode.style.display = "block";                      
            iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
            iframe.document.open();
            iframe.document.write(data);
            iframe.document.close();

            var iframe = document.getElementById('preview-noimgs');
            iframe.parentNode.style.display = "block";                      
            iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
            iframe.document.open();

            var $data = $(data);
            $data.find("img").removeAttr("src");

            iframe.document.write($data.html());
            iframe.document.close();
        }
    }
});

This gives me: NULL or [object Object] depending if I add .html()

What is the correct way to modify the source?

Reading through the jquery docs I found parseHTML() but sadly wont be able to use this because we are restricted to version 1.7.1 is there another way to do this?

Preview: http://jsbin.com/cuqarica/2/edit

Khanh TO · Accepted Answer · 2014-04-22 13:22:18Z

2

Be aware that .html() returns the innerHTML, not the outerHTML

I think you should try this instead:

var $data = $("<div>" + data + "</div>");

By adding a div wrapper, you can be sure that $data.html() returns the correct original node.

If you're adding a full html page to the iframe, you could try this:

iframe = document.getElementById('preview-noimgs');
iframe.parentNode.style.display = "block";                      
var iframeWindow = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
iframeWindow.document.open();
iframeWindow.document.write(data);
iframeWindow.document.close();

$(iframe).contents().find("html").find("img").removeAttr("src"); //remove the `src`

edited Apr 22, 2014 at 13:22

answered Apr 22, 2014 at 12:44

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

John Magnolia Over a year ago

My data is full HTML with doctype, could this be the reason jquery is having issues

John Magnolia Over a year ago

I think I need to make sure we modify the data before writing to the iframe. Jquery has had issues in the past modifying an iframe. I'm just a bit lost on what to try next.

Khanh TO Over a year ago

@John Magnolia: a mistake, it should be $(iframe).contents().find("html").find("img").removeAttr("src");. I updated the answer

Dean Meehan Over a year ago

I think there may be restrictions with dealing with content within an iFrame, you could use a service like php or ajax to download the origional page as text, strip the img tags etc then display the html.

Collectives™ on Stack Overflow

javascript populate iframe, modify source in one

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related