當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
iframe父子级页面传值支持跨域访问javascript
生活随笔
收集整理的這篇文章主要介紹了
iframe父子级页面传值支持跨域访问javascript
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
??今天在使用parent.fn()調用父頁面方法時發現并沒有成功調用到父級iframe中的方法，后來發現是兩個iframe并不在同一域名下，在網上查過后，發現H5中message方法恰好支持，閑話不多說了，上代碼
父界面
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-1.11.3.min.js"></script><script type="text/javascript" src="js/cdIframe.js" ></script></head><body><!--注意該頁面在打開時不能使用http://192.168.1.222--><iframe src="http://192.168.1.222:8020/mywork1/new_file.html" width="" height="" id="iframe"></iframe></body><script type="text/javascript">/** receiveMessage (type, callback)* type 子頁面傳值時進行匹配的字段名稱* callback(data, node)* node 子頁面所傳的值* * */receiveMessage("istype", function (data, node) {console.log(node)//子頁面中所填寫類型為"istype"的數據})</script></html>子頁面
<!DOCTYPE html> <html><head><meta charset="UTF-8"><script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script><script type="text/javascript" src="js/cdIframe.js" ></script><title></title></head><body><button id="btn">按鈕</button><script>/** postMessage(type, data, direction)* param： type content direction* istype 父頁面接收時進行匹配的字段名稱* top 標記該數據向父級頁面傳輸* * */postMessage("istype", "這是一個句話", "top")</script></body> </html>以下就是js代碼：
/** cdIframe.js* iframe中跨域通信* 2018-8-9* Y J* * */ //父窗體中監聽消息 function receiveMessage (type, callback) {window.addEventListener('message', function(e) {if(e.data.type == type){callback(e.data, e)};}); }; //子窗體中監聽消息 function postMessage(type, data, direction) {var post = {type: type,data: data};if(direction == "top"){window.parent.postMessage(post, '*');}else{window.frames[0].postMessage(post,'*'); //若是向子頁面傳值則使用該句}; };以上就是所有的代碼了，如果哪里寫的不對還請多多指正。
下載地址：https://gitee.com/yangjunhouse/dome/tree/master/dome-cdIframe
?
?
總結
以上是生活随笔為你收集整理的iframe父子级页面传值支持跨域访问javascript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hdu 1558(线段相交+并查集)
- 下一篇： 基于SpringBoot的开源免费微信管