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

我不知道该怎么做，但如果你明白我的意思，我希望能够使用 iframe 中的内容使用$("*").each()？

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

非常感谢任何帮助

Answer 1

你应该换行

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 2

如果您的 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 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 并右键单击某些内容