首頁  >  問答  >  主體

javascript - 父親頁面監聽iframe中的事件問題

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

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...
跨文件通訊解決方案

世界只因有你世界只因有你2713 天前893

全部回覆(4)我來回復

  • 滿天的星座

    滿天的星座2017-05-16 13:37:56

    son.html

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

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

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

    回覆
    0
  • 漂亮男人

    漂亮男人2017-05-16 13:37:56

    頁間通訊可以使用 postMessage。

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

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

    回覆
    0
  • 天蓬老师

    天蓬老师2017-05-16 13:37:56

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

    回覆
    0
  • 为情所困

    为情所困2017-05-16 13:37:56

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

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

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

    回覆
    0
  • 取消回覆