在同一個域上訪問iframe內容

我試圖創建一個簡單的測試，以從其父容器修改iframe的內容並從iframe修改父容器的內容。這是我到目前爲止有：在同一個域上訪問iframe內容

first.html：

<!doctype html> 
<html> 
    <head> 
    <title>First</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript" src="shared.js"></script> 
    <script type="text/javascript" src="first.js"></script> 
    </head> 
    <body> 
    <h1>First</h1> 
    <iframe src="http://localhost:3000/second.html"></iframe> 
    </body> 
</html>

second.html：

<!doctype html> 
<html> 
    <head> 
    <title>Second</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript" src="shared.js"></script> 
    <script type="text/javascript" src="second.js"></script> 
    </head> 
    <body> 
    <h1>Second</h1> 
    </body> 
</html>

shared.js：

function modifyContent(targetContainerElement, targetSelector, sourceString) { 
    $(targetContainerElement).find(targetSelector).html("Modified by " + sourceString + "!"); 
}

first.js：

$(document).ready(function() { 

    var iframe = $("iframe"); 
    modifyContent(iframe.contents(), "h1", "First"); 
});

個

second.js：

$(document).ready(function() { 

    if (!top.document) 
    return; 

    modifyContent(top.document.body, "h1", "Second"); 
});

運行的代碼，我用python -m SimpleHTTPServer 3000並導航到localhost:3000/first.html。第一個標題被修改，並說「第二修改！」但第二個標題只是說「第二個」。我在這裏錯過了什麼？

來源

2012-11-12 LandonSchropp

嘗試改變iframe中h1標籤時，它的完全加載：

$(document).ready(function() { 

    var iframe = $("iframe"); 
    iframe.load(function() 
    { 
    modifyContent(iframe.contents(), "h1", "First"); 
    }); 
});

另外，我認爲你應該重寫modifyContent：

function modifyContent(isJquery, targetContainerElement, targetSelector, sourceString) 
{ 
    if (isJquery) 
    targetContainerElement.find(targetSelector).html("Modified by " + sourceString + "!"); 
    else 
    $(targetContainerElement).find(targetSelector).html("Modified by " + sourceString + "!"); 
}

只是targetContainerElement會的工作，因爲你並不真正需要把它包裝在$（）中，因爲它已經是一個jQuery對象

來源

2012-11-12 07:06:50

它不是second.js中的jQuery對象。 – LandonSchropp

沒錯。對於second.js，您需要將其包裝在$（）中 –

爲兩種方案重寫了我的代碼。只要傳遞額外的參數isJquery，如果元素是一個jQuery對象 –

在同一個域上訪問iframe內容

回答

相關問題