【JavaScript】關于父窗口獲取跨域iframe子窗口中的元素
當前位置:點晴教程→知識管理交流
→『 技術文檔交流 』
這幾天在項目中遇到一個難點,就是需要異步加載一個pdf插件,同時又需要獲取這個插件中的點擊事件來生成用戶的下載記錄。剛開始也是想了很多方法,網上搜的: 格式1:$("#iframe的ID").contents().find("#iframe中的控件ID").click(); 格式2:$("#iframe中的控件ID",document.frames("frame的name").document).click(); 發現在跨域環境下并沒有用,看到有些人說這個無解,需要走后臺,我當時也是涼涼感覺。后來自己也是想了辦法,在插件頁面中給按鈕綁定事件,然后通過給插件帶參數時在url中加上幾個參數,一起提交。剛開始我也是做得風生水起,結果,后來發現要帶的參數太多了,而插件又是以iframe引入, 很是麻煩。結果無意中找到了html5有一個頁面通訊方法,一實驗果然有效?,F在做個記錄,以備不時之需。 子頁面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()方法,里面的參數細節請參考相關文檔。 該文章在 2023/5/25 14:54:54 編輯過 |
關鍵字查詢
相關文章
正在查詢... |