這幾天在項目中遇到,一個難點, 就是需要異步加載一個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()方法,里面的參數細節,請參考相關文檔.

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的关于父窗口获取跨域iframe子窗口中的元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。