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

&傻小子發表於2019-01-08
跨域

　　這幾天在專案中遇到,一個難點, 就是需要非同步載入一個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()方法,裡面的引數細節,請參考相關文件.

相關文章