javascript - 父親頁面監聽iframe中的事件問題
世界只因有你
世界只因有你 2017-05-16 13:35:56
0
4
936

始終無法監聽到,是什麼原因?

parent.html

<body>
    <iframe id="iframe" src="son.html" frameborder="0"></iframe>

<script src="./jquery.js"></script>
<script>
    $(function(){
        $($('#iframe')[0].contentWindow).on('dosomething', function(){
            alert('接收到到iframe的事件');
        });
    });
</script>
</body>

son.html

<body>
    
    <h1>son</h1>
    <button id="button">trigger</button>

<script src="./jquery.js"></script>
<script>
    $(function(){
        $('#button').on('click', function(){
            $(window).trigger('dosomething');
        });
    });
</script>
</body>

謝謝!

Dont

剛才搜尋時發現的,也不錯,相容性可以
MessengerJS
https://github.com/biqing/Mes...
跨文件通訊解決方案

世界只因有你
世界只因有你

全部回覆(4)
滿天的星座

son.html

 $(function(){
        $('#button').on('click', function(){
            window.parent.$(window).trigger('dosomething');
        });
    });

事件是在父親頁面的jquery定義的,要觸發需要交由父頁面的jquery來負責觸發。

jquery源碼太久沒看了,找半天,沒找到對應的內容來說明。

漂亮男人

頁間通訊可以使用 postMessage。

或只在同一個頁面綁定和處理事件。

$('#iframe').contents().find('#button').on("click", function(){
    $(window).trigger('dosomething');
});
Peter_Zhu

無法監聽到的原因是因為父頁面透過on方法執行事件綁定的時候,將事件回呼函數註冊在了父頁面的jquery物件中。而子頁面在執行trigger方法的時候只會尋找子頁面的jquery物件中註冊的事件回調,所以在事件觸發後執行不了父頁面註冊的事件回調函數,因為在子頁面的jquery物件裡找不到。

为情所困

兩個jq, 兩個環境, 確定沒問題麼?

------ 上面是原答案, 下面是我被檢舉以後的吐槽 -------

我想請問舉報我的那個, 兩個jq環境, 這是不是你無法觸發事件的原因?
我這個回答有什麼問題? 你舉報的理由是啥?

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板