putting content from iframe into current DOM

Question

Morning all. I have the folowing problem:

$(document).ready(function(){
$("#actContentToGet").load(function(){
    var htmlCODE = document.getElementById('actContentToGet').contentWindow.document.body; 
    var elements = [];
    var z = 1;
    function alterContent(htmlCODE){
        $("#createdDivs").html("");
        htmlCODE.$("*").each(function(){
            alert("w");
            if($(this).attr("rel")!="nbta"){
                var style = '#div' + z + ' style: ' + 'display:block; width:' + $(this).outerWidth( true ) + 'px; height:' + $(this).outerHeight( true ) + 'px; position:absolute; top:' + $(this).position().top + 'px; left:' + $(this).position().left + 'px; cursor:pointer; z-index:' + $(this).parentNumber() + ';';

                var newDiv = '<div name="maskBox" id="div' + z + '" class="' + $(this).attr("id") + '" style="display:none;">&nbsp;</div>';
                $("#createdDivs").append(newDiv); 
                $("#div" + z).attr("style", style);
                z++;
            }
        });
    }
});
});

im not sure how to go about this but i want to be able to use $("*").each() using the content from the iframe if you understand what i mean?

i used htmlCODE.$("*").each(function(){ htmlCODE is undefined

any help much appreciated

Answer 1

If your IFRAME is on a different domain, you're essentially out of luck. Same-Domain security I believe plays a role here, and were you able to IPC in javascript with IFRAMES, you could launch all sorts of nasty attacks. People who have working implementations of site-sharing have to utilise proxy servers to relay messages between domains to get around browser security.

   # works.
   $('body').append($(document.createElement('iframe')).attr('src','http://google.com'));
   # undefined
   $('iframe').contentWindow
   # undefined
   $('iframe').get(0).contentWindow
   # empty array
   $('iframe').contents()

I also thought I'd point out some grievous design nasties in the pasted code.

1. Formatting DOM elements by gluing strings together.
2. Creating DOM elements by gluing strings together.

Goodness only understands what this does:

var style = '#div' + z + ' style: ' + 'display:block; width:' + $(this).outerWidth( true ) + 'px; height:' + $(this).outerHeight( true ) + 'px; position:absolute; top:' + $(this).position().top + 'px; left:' + $(this).position().left + 'px; cursor:pointer; z-index:' + $(this).parentNumber() + ';';

Its a recipe waiting for XSS. Instead, this is recommended.

  # Create a HashMap of keys-values instead of a string.
   var style = { display: 'block', 
                 width: $(this).outerWidth( true ) + 'px', 
                 height: $(this).outerHeight(true) + 'px', 
                 position: 'abosolute', 
                 top: $(this).position().top + 'px', 
                 left: $(this).position().left + 'px', 
                 cursor: 'pointer', 
                 'z-index': $(this).parentNumber() 
   }; 
   var div = document.createElement('div'); 
   $(div).attr({ name:'maskBox', id: 'div' + z  }); 
   $(div).addClass( $(this).attr("id") ); 
   $(div).css(style);
   $(div).html('&nbsp'); 
   $("#createdDivs").append(div); 

Answer 2

you should change the line

htmlCODE.$("*").each(function(){

to

$("*", htmlCODE).each(function(){

but IMO you could just use jQuery to get iframe content and insead of getting all elements $("*") you should just look for elements with given REL attribute. You could also store references to elements that you often use (eg. #createDivs) and generally you should use more jQuery function and not operate on strings.

$(document).ready(function(){
    $("#actContentToGet").load(function(){
        var htmlCode = $(this).contents().find("body");
        var z = 1;
        var createDivs = $("#createdDivs");

        function alterContent(){
            htmlContent.find("[rel=nbta]").each(function(){
               var self = $(this);
               var position = self.position();
               var newDiv = $('<div/>').attr({
                   name: "maskBox", // BTW. DIV element isn't allowed to have NAME attribute
                   id: "div" + z
               }).css({
                   display: 'block',
                   width: self.outerWidth(true) + 'px',
                   height: self.outerHeight(true) + 'px',
                   position: 'absolute',
                   top: position.top + 'px',
                   left: position.left + 'px',
                   cursor: 'pointer',
                   'z-index': self.parentNumber()
               }).addClass($(this).attr('id').hide().html('&nbsp;');
               createDivs.append(newDiv);
               z++;
            });
        }
    });
});

I think, this is more clean way to do this. Didn't test this code, so it can have some typos and minor bugs.

Answer 3

I have got it working, the code has been tried many ways and as it stands works ( only in ie6, chrome and fireafox at the min)

function alterContent(){
        $("#createdDivs").html("");
        var htmlCODE = document.getElementById('actContentToGet').contentWindow.document.body.getElementsByTagName("*");
        for (var i = 0;i< htmlCODE.length; i++){
            var element = htmlCODE[i];
            if($(element).attr("rel")!="nbta"){
                var style = '#div' + z + ' style: ' + 'display:block; width:' + $(element).outerWidth( true ) + 'px; height:' + $(element).outerHeight( true ) + 'px; position:absolute; top:' + $(element).position().top + 'px; left:' + $(element).position().left + 'px; cursor:pointer; z-index:' + $(element).parentNumber() + ';';
                var newDiv = '<div name="maskBox" id="div' + z + '" class="' + $(element).attr("id") + '" style="display:none;">&nbsp;</div>';
                $("#createdDivs").append(newDiv); 
                $("#div" + z).attr("style", style);
                z++;
            }
        }
    }

check out my working progress here: http://www.actwebdesigns.co.uk/web-design-mansfield/index-test.php and right click on something