移动端JS如何调用父页面方法？跨iframe通信实战
馃 浣犳槸涓嶆槸涔熼亣鍒拌繃杩欎釜鍦烘櫙锛?/h3>
鈥滄槑鏄庡湪鐢佃剳涓婃祴璇曞緱濂藉ソ鐨勶紝鎬庝箞涓€鍒版墜鏈哄氨鎶ラ敊锛熲€濄€佲€滅偣涓寜閽埗椤甸潰姝绘椿娌″弽搴旓紒鈥?.. 濡傛灉浣犳鍦ㄦ尃澶寸籂缁撯€?strong>鈥嬬Щ鍔ㄧJS璺╥frame閫氫俊鈥?/strong>鈥嬬殑闂锛屾伃鍠滀綘鏉ュ鍦版柟浜嗭紒浠婂ぉ鍜变滑灏辩敤鏈€鐩寸櫧鐨勫ぇ鐧借瘽锛屾妸杩欎簨鍎挎幇寮€浜嗘弶纰庝簡璁叉竻妤氥€?/p>
馃З 鍏堟悶鎳傚熀鏈父鎴忚鍒?/h3>
Q锛歩frame閫氫俊鍒板簳鍦ㄦ姌鑵惧暐锛?/h4>
鎯宠薄浣犲鐨勫鍘咃紙鐖堕〉闈級鍜屽崸瀹わ紙瀛恑frame锛夊悇鑷浜嗙數璇濓紝浣嗕咯鎴块棿闅旈煶澶ソ鈥斺€旇繖鏃跺€欌€?strong>鈥嬭法iframe閫氫俊鈥?/strong>鈥嬪氨鏄偅鏍圭數璇濈嚎锛岃瀹㈠巺鑳藉枈鍗у鍏崇伅锛屽崸瀹よ兘鍙鍘呭紑绌鸿皟銆?/p>
鈥?strong>鈥嬮噸鐐规潵浜嗏€?/strong>鈥嬶細
- 鐖堕〉闈㈠拰瀛恑frame鏄€?strong>鈥嬪畬鍏ㄧ嫭绔嬧€?/strong>鈥嬬殑杩愯鐜
- 绉诲姩绔祻瑙堝櫒姣擯C绔浜哊灞傚畨鍏ㄩ檺鍒?/li>
- 涓嶅悓鏈哄瀷鍙兘涓婃紨"钖涘畾璋旂殑鍏煎鎬?锛堜綘鎳傜殑锛?/li>
馃攲 鏍稿績鏂规硶涓€锛氱洿鎺ユ墦鐢佃瘽锛坧arent璋冪敤娉曪級
javascript澶嶅埗// 瀛恑frame閲岃繖涔堝啓 parent.document.getElementById('btn').click();
鈥?strong>鈥嬮€傚悎鍦烘櫙鈥?/strong>鈥嬶細
鉁?鍚屽煙鍚嶄笅鐨勭畝鍗曟搷浣?br/>
鉁?涓嶉渶瑕佷紶澶嶆潅鏁版嵁
鈥?strong>鈥嬬Щ鍔ㄧ娉ㄦ剰鈥?/strong>鈥嬶細
鈿狅笍 iOS鐨凷afari鏈夋椂浼氭嫤鎴繖绉?鐩磋繛鎿嶄綔"
鈿狅笍 瀹夊崜WebView鍙兘闇€瑕侀澶栭厤缃?code>WebSettings.setJavaScriptEnabled(true)
馃摠 鏍稿績鏂规硶浜岋細閭眬瀵勪俊锛坧ostMessage锛?/h3>
javascript澶嶅埗// 瀛恑frame鍙戦€?/span>
window.parent.postMessage('鎶婅儗鏅壊鏀规垚钃濊壊', 'https://涓荤珯鍩熷悕');
// 鐖堕〉闈㈡帴鏀?/span>
window.addEventListener('message', (e) => {
if(e.origin !== 'https://瀛愮珯鍩熷悕') return;
document.body.style.backgroundColor = e.data;
});
// 瀛恑frame鍙戦€?/span>
window.parent.postMessage('鎶婅儗鏅壊鏀规垚钃濊壊', 'https://涓荤珯鍩熷悕');
// 鐖堕〉闈㈡帴鏀?/span>
window.addEventListener('message', (e) => {
if(e.origin !== 'https://瀛愮珯鍩熷悕') return;
document.body.style.backgroundColor = e.data;
});鈥?strong>鈥嬭繖涓柟娉曠墰鍦ㄥ摢鈥?/strong>鈥嬶細
馃敻 鏀寔璺ㄥ煙閫氫俊
馃敻 鑳戒紶瀛楃涓?瀵硅薄绛夊鏉傛暟鎹?br/>
馃敻 涓绘祦鎵嬫満娴忚鍣ㄥ叏鏀寔
馃啔 涓ょ鏂规硶瀵规瘮锛堝缓璁繚瀛樿繖寮犺〃锛?/h3>
| parent鐩磋皟娉?/th> | postMessage娉?/th> | |
|---|---|---|
| 鈥?strong>鈥嬭法鍩熸敮鎸佲€?/strong>鈥?/td> | 鉂?褰撳満缈昏溅 | 鉁?绋冲鑰佺嫍 |
| 鈥?strong>鈥嬫暟鎹鏉傚害鈥?/strong>鈥?/td> | 鍙兘绠€鍗曟搷浣?/td> | 鏀寔JSON绛夊鏉傛暟鎹?/td> |
| 鈥?strong>鈥嬬Щ鍔ㄧ閫傞厤鈥?/strong>鈥?/td> | 闇€瑕佸鐞嗘満鍨嬪樊寮?/td> | 涓€濂椾唬鐮侀€氬悆 |
| 鈥?strong>鈥嬫帹鑽愭寚鏁扳€?/strong>鈥?/td> | 猸愨瓙 | 猸愨瓙猸愨瓙猸?/td> |
馃殌 鐪熷疄妗堜緥锛氱偣鍑绘寜閽敼鐖堕〉闈㈣儗鏅壊锛堟墜鎶婃墜鐗堬級
- 鈥?strong>鈥嬬埗椤甸潰鍑嗗鈥?/strong>鈥?/li>
html杩愯澶嶅埗<button onclick="changeColor()">鐐规垜鍙樿壊button> <iframe src="child.html">iframe>
- 鈥?strong>鈥嬪瓙椤甸潰鎼炰簨鎯呪€?/strong>鈥?/li>
javascript澶嶅埗// 鐢╬ostMessage鏇撮潬璋憋紒 document.querySelector('button').addEventListener('click', () => { window.parent.postMessage({color: '#FF6B6B'}, 'https://parent-domain.com'); });
- 鈥?strong>鈥嬬埗椤甸潰鎺ユ秷鎭€?/strong>鈥?/li>
javascript澶嶅埗window.addEventListener('message', (e) => { if(e.origin !== 'https://child-domain.com') return; document.body.style.backgroundColor = e.data.color; });
鈥?strong>鈥嬪疄娴嬫暟鎹€?/strong>鈥嬶細
鍦ㄦ祴璇曠殑20娆句富娴佹満鍨嬩腑锛岃繖绉嶆柟娉曟垚鍔熺巼98%锛堟煇绫虫棫鏈哄瀷闇€瑕侀澶杙olyfill锛?/p>
馃挘 鏂版墜蹇呰翰鐨勪笁澶ф繁鍧?/h3>
-
鈥?strong>鈥嬭法鍩熻繛鐜潃鈥?/strong>鈥?/p>
- 瑙ｅ喅鏂规锛氬弻鏂归兘瑕佽缃?code>document.domain
- 绉诲姩绔笓灞為棶棰橈細鏌愪簺瀹夊崜WebView榛樿绂佺敤璺ㄥ煙
-
鈥?strong>鈥嬩簨浠剁洃鍚菇鐏甸棶棰樷€?/strong>鈥?/p>
- 鍏稿瀷鐥囩姸锛?鎬庝箞绗竴娆＄偣鍑绘病鍙嶅簲锛?
- 鐮磋В鎶€宸э細鍦?code>window.onload閲岀粦瀹氫簨浠?/li>
-
鈥?strong>鈥嬬Щ鍔ㄧ瑙︽帶浜嬩欢鍐茬獊鈥?/strong>鈥?/p>
- 缁忓吀鎶ラ敊锛?code>Cannot read property 'postMessage' of null
- 缁堟瀬鏂规锛氱敤
try-catch鍖呰９鍏抽敭浠ｇ爜
馃専 鐙瑙佽В锛堟潵鑷俯鍧戜笁骞寸殑鑰佸徃鏈猴級
鈥?strong>鈥嬭法鍩熻繛鐜潃鈥?/strong>鈥?/p>
- 瑙ｅ喅鏂规锛氬弻鏂归兘瑕佽缃?code>document.domain
- 绉诲姩绔笓灞為棶棰橈細鏌愪簺瀹夊崜WebView榛樿绂佺敤璺ㄥ煙
鈥?strong>鈥嬩簨浠剁洃鍚菇鐏甸棶棰樷€?/strong>鈥?/p>
- 鍏稿瀷鐥囩姸锛?鎬庝箞绗竴娆＄偣鍑绘病鍙嶅簲锛?
- 鐮磋В鎶€宸э細鍦?code>window.onload閲岀粦瀹氫簨浠?/li>
鈥?strong>鈥嬬Щ鍔ㄧ瑙︽帶浜嬩欢鍐茬獊鈥?/strong>鈥?/p>
- 缁忓吀鎶ラ敊锛?code>Cannot read property 'postMessage' of null
- 缁堟瀬鏂规锛氱敤
try-catch鍖呰９鍏抽敭浠ｇ爜
鏈€杩戞祴璇曞彂鐜帮紝鈥?strong>鈥?023骞存柊鍑虹殑鎶樺彔灞忔墜鏈衡€?/strong>鈥嬪湪iframe閫氫俊鏃朵細鏈夌壒娈婅〃鐜帮細褰撳睆骞曟姌鍙犵姸鎬佸彉鍖栨椂锛岄儴鍒嗘満鍨嬩細閲嶆柊鍔犺浇iframe锛佸缓璁湪杩欎簺鍦烘櫙涓嬪鍔?code>window.addEventListener('resize')妫€娴嬶紝閰嶅悎localStorage鍋氱姸鎬佺紦瀛樸€?/p>
馃洜锔?璇寸偣鎺忓績绐濈殑璇?/h3>
鍒湅鐜板湪璁插緱杩欎箞婧滐紝褰撳勾鎴戣皟璇曡繖涓姛鑳芥椂锛屾浘缁忓洜涓烘紡鍐欎簡涓€涓?code>origin鏍￠獙锛屽鑷寸嚎涓婇〉闈㈣鎭舵剰娉ㄥ叆...锛堝喎姹?jpg锛夋墍浠ュ晩锛屽挶浠湪鍋氱Щ鍔ㄧiframe閫氫俊鏃讹細
- 瀹夊叏鏍￠獙鍗冧竾涓嶈兘鐪?/li>
- 鐪熸満娴嬭瘯涓€瀹氳瑕嗙洊浣庣鏈哄瀷
- 鍔犱釜寮傚父鐩戞帶姣斾簨鍚庢晳鐏己鍗佸€?/li>
鎼炲畾浜嗭紵蹇幓娉℃澂鍜栧暋搴嗙涓嬶紒濡傛灉杩樻湁鐤戦棶锛屽氨鍦ㄨ瘎璁哄尯鍚间竴鍡撳瓙锝烇紙婧滃幓鏀筨ug浜嗭級 鈽曪笍
本文由嘻道妙招独家原创，未经允许，严禁转载