關於父窗口獲取跨域iframe子窗口中的元素

　　這幾天在項目中遇到,一個難點, 就是需要異步加載一個pdf插件, 同時又需要獲取這個插件中的點擊事件來生成用戶的下載記錄.

剛開始也是想了很多方法,網上搜的

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

發現在跨域環境下並沒有用, 看到有些人說這個無解, 需要走后台, 我當時也是涼涼感覺. 

　　后來自己也是想了辦法,在插件頁面中給按鈕綁定事件,然后通過給插件帶參數時在url中加上幾個參數,一起提交.剛開始我也是做得風生水起

結果,后來發現,腰帶的參數太多了,而插件又是以iframe引入, 很是麻煩..結果無意中找到了html5有一個頁面通訊方法,  一實驗果然有效...現在做個記錄,以備不時之需

 

子頁面iframe中的代碼:

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

那個fun參數沒有實際意義,我只是為了加個小教驗,當然也可以傳入自己想傳的參數.  父頁面代碼:

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

這樣, 在我們點擊子頁面的下載按鈕時,會給父頁面發一個消息,而父頁面的事件監聽器會接收到從而觸發相應的事件.

當然,我也是剛了解這個postMessage()方法,里面的參數細節,請參考相關文檔.