這幾天在項(xiàng)目中遇到一個(gè)難點(diǎn)，就是需要異步加載一個(gè)pdf插件，同時(shí)又需要獲取這個(gè)插件中的點(diǎn)擊事件來生成用戶的下載記錄。剛開始也是想了很多方法，網(wǎng)上搜的：

格式1：$("#iframe的ID").contents().find("#iframe中的控件ID").click();
 
格式2：$("#iframe中的控件ID",document.frames("frame的name").document).click();

發(fā)現(xiàn)在跨域環(huán)境下并沒有用，看到有些人說這個(gè)無解，需要走后臺(tái)，我當(dāng)時(shí)也是涼涼感覺。后來自己也是想了辦法，在插件頁面中給按鈕綁定事件，然后通過給插件帶參數(shù)時(shí)在url中加上幾個(gè)參數(shù)，一起提交。剛開始我也是做得風(fēng)生水起，結(jié)果，后來發(fā)現(xiàn)要帶的參數(shù)太多了，而插件又是以iframe引入, 很是麻煩。結(jié)果無意中找到了html5有一個(gè)頁面通訊方法，一實(shí)驗(yàn)果然有效?，F(xiàn)在做個(gè)記錄，以備不時(shí)之需。 

子頁面iframe中的代碼：

<script type="text/javascript">
        $("#secondaryDownload").click(function(){
            var fun="click";
            window.parent.postMessage(fun,'*');
        })
</script>

那個(gè)fun參數(shù)沒有實(shí)際意義，我只是為了加個(gè)小校驗(yàn)，當(dāng)然也可以傳入自己想傳的參數(shù)。

父頁面代碼：

window.addEventListener('message',function(e){
        console.log(e);
        var fun=e.data;
        if(fun=="click"){
                alert("aaa");
                };
            }
        },false);

這樣，在我們點(diǎn)擊子頁面的下載按鈕時(shí)，會(huì)給父頁面發(fā)一個(gè)消息，而父頁面的事件監(jiān)聽器會(huì)接收到從而觸發(fā)相應(yīng)的事件。

當(dāng)然，我也是剛了解這個(gè)postMessage()方法，里面的參數(shù)細(xì)節(jié)請(qǐng)參考相關(guān)文檔。