捕獲從子框架到父框架的點擊事件

對，這很奇怪。我做了大量谷歌搜索，發現了數百篇文章，似乎指向了正確的方向，但似乎沒有任何工作。捕獲從子框架到父框架的點擊事件

這裏是什麼，我試圖做的最新的化身：

父頁

<html> 
<head> 
    <script> 
    $('#mainWindow').ready(function() { 
     $('#mainWindow').contents().find('#clickThis').live('click', function() { 
      alert('Click detected!'); 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <iframe id="mainWindow" name="mainWindow" src="myMainPage.aspx" style="border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%"></iframe> 
    <iframe src="myOtherPage.aspx"></iframe> 
</body> 
</html>

框架式網頁（坐在主窗口）

<html> 
    ' LOADS OF STUFF INCLUDING: 
    <li id="clickThis">Click This</li> 
</html>

所以，很顯然什麼，我想當用戶單擊子框架中的按鈕時，在此處執行的操作是在父頁面中運行一些代碼。

它需要工作live因此，如果在框架的頁面改變它仍然是由母公司捕獲

我已經能夠運行的代碼（將在其上加載到幀的所有頁面存在此元素）跨越iFrames，從父到iFrame，從iFrame到iFrame，然後進行各種其他搜索，但是從iFrame運行到父項導致問題。

上面的代碼什麼都不做，也沒有任何其他的選項我試過！

* 編輯應該添加，所有文件都在同一臺服務器上，跨域問題都不是問題

來源

2012-07-10 Jamie Hartnoll

'live'已棄用。改爲使用[on]（http://api.jquery.com/on/）。 – 2012-07-10 12:30:23

@Rune好的，但都不能用上面的代碼！ – 2012-07-10 12:31:34

爲什麼您使用find綁定事件偵聽器可能不會有一個元素？爲什麼不只是嘗試：

$('#mainWindow').ready(function() 
{ 
    $('#clickThis').on('click',function() 
    { 
     alert($(this).html());//or something 
    }); 
});

BTW：因爲你的代碼是#mainWindow準備回調裏面，有沒有必要使用$('#mainWindow')第二次，因爲這會掃描DOM樹第二次。只需使用this或$(this)，因爲它無論如何都會引用mainWindow元素。

如果on不起作用，請不要忘記檢查是否包含最新版本的jQuery。這也可能是on不工作的原因。

來源

2012-07-10 12:40:58

我真的不知道我爲什麼使用'find'我只是想嘗試一些我在網上找到的不同例子。出於某種原因，你的例子也不能工作。因爲iFrames有它自己的文檔對象 – 2012-07-10 12:47:52

嘗試'$（$（'＃mainWindow'）。document）.ready' – 2012-07-10 13:18:37

Nope :-( ）不管是'live'還是'on'我都沒有得到'alert' – 2012-07-10 14:26:43

This works fine for me：

$('#myframe').contents().on('click', function() { 
    $('#result').text('clicked'); 
});

如果你想捕捉只是在內容文檔的一部分的事件，使用.contents().find(<selector>)（<selector>是如'body'），而不是僅僅.contents()

某事小心：您的所有網頁必須存在於相同的document.domain下，否則JavaScript調用將失敗。你會看到這在你的控制檯中出現安全異常。發生這種情況的原因是same-origin policy。

來源

2012-07-10 12:59:17 jbabey

這讓我瘋狂了！在這麼簡單的東西上浪費了很多時間!!你的'jsFiddle'在Chrome中工作，但不是在FIrefox中，但是將相同的代碼翻譯成我的項目並不起作用！ – 2012-07-10 13:11:05

jsfiddle不爲我工作 – Slay 2017-05-02 13:59:00

方式，方法太晚一個答案，但我有同樣的問題，並在所有瀏覽器下方的作品代碼：

$('#myiframe').on('load', function() { 
    $(this).contents().on('click', function() { 
     alert('Click detected!'); 
    }) 
})

它連接onclick處理程序，但iframe中已經加載之後。我在這裏留下了後代和其他人尋找同一問題的答案。

來源

2015-12-22 19:14:53

好的答案永遠不會太晚 – Drew 2015-12-22 19:32:42

如果您想要在iframe中捕獲一些數據，這將適用於您：有一個iframe元素包含多個圖像。 iframe在父頁面內呈現。無論您在iframe中點擊哪個圖片，該圖片的ID都會發送回父級。

裏面的iframe：

<script> 
function vote(e) { 
      myMessage = e; 
      window.parent.postMessage(myMessage, "*"); 
      return false; 
     } 
</script> 

     <body><div> 
     <img id="Image1" src="file:///Users/abcd/Desktop/1.jpeg" width="200px" onclick="vote(this.id)"> 
     </div></body>

內部父頁面：

</script> 
function displayMessage (evt) { 
     var message = "You voted " + evt.data; 
     document.getElementById("received-message").innerHTML = message; 
    } 

    if (window.addEventListener) { 
     // For standards-compliant web browsers 
     window.addEventListener("message", displayMessage, false); 
    } 
    else { 
     window.attachEvent("onmessage", displayMessage); 
    } 
</script> 

<body><div id="received-message"></div></body>

這不僅能夠捕捉點擊次數，但也捕捉元素的ID被點擊的iframe內。另外，這不需要JQuery。

來源

2017-01-11 11:39:45

捕獲從子框架到父框架的點擊事件

回答

相關問題