将iframe中的内容放入当前DOM中

Question

大家早。 我有以下问题：

$(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++;
            }
        });
    }
});
});

我不确定如何解决这个问题，但是如果您了解我的意思，我希望能够使用$("*").each()使用iframe中的内容？

我使用了htmlCODE.$("*").each(function(){ htmlCODE是未定义的

任何帮助非常感谢

Answer 1

如果您的IFRAME在其他域中，那么您基本上就不走运了。 我相信同域安全在这里发挥了作用，如果您能够使用IFRAMES在javascript中进行IPC，则可以发起各种讨厌的攻击。 实施站点共享的人必须利用代理服务器在域之间中继消息，以避开浏览器安全性。

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

我还以为我会在粘贴的代码中指出一些严重的设计缺陷。

1. 通过将字符串粘合在一起来格式化DOM元素。
2. 通过将字符串粘合在一起来创建DOM元素。

天哪只明白这是做什么的：

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() + ';';

等待XSS的食谱。 相反，建议这样做。

  # 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

你应该换线

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

至

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

但是IMO，您可以只使用jQuery获取iframe内容，并尝试获取所有元素$（“ *”），您应该只查找具有给定REL属性的元素。 您还可以存储对经常使用的元素的引用（例如#createDivs），通常应使用更多的jQuery函数，而不要对字符串进行操作。

$(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++;
            });
        }
    });
});

我认为，这是更干净的方法。 没有测试此代码，因此它可能会有一些错别字和小错误。

Answer 3

我已经开始工作了，代码已经尝试了很多方式，并且可以正常工作（至少在ie6，chrome和fireafox中有效）

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

在这里查看我的工作进度： http : //www.actwebdesigns.co.uk/web-design-mansfield/index-test.php并右键单击某些内容