將內容從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和一些