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

如果您的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()

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

通过将字符串粘合在一起来格式化DOM元素。
通过将字符串粘合在一起来创建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并右键点击某些内容

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

3 个答案: