浣犳湁娌℃湁閬囧埌杩囧湪缃戦〉閲屽祵浜嗕釜iframe锛岀粨鏋滃彂鐜版娲昏皟涓嶅姩閲岄潰鐨勫嚱鏁帮紵灏卞儚闅旂潃鐜荤拑鍠婁汉锛屽鏂瑰帇鏍瑰惉涓嶈锛熷埆鎱岋紒浠婂ぉ鍜变滑鐢?涓帴鍦版皵鐨勬楠わ紝鎶婅繖鍧楃‖楠ㄥご鍟冧笅鏉ャ€傚惉璇存湁浜轰负浜嗚繖涓猙ug杩炵啲涓夊锛屾渶鍚庡彂鐜拌В鍐虫柟娉曞眳鐒惰繖涔堢畝鍗?..

馃攽 绗?姝ワ細鎼炴噦娴忚鍣ㄧ殑"闂ㄧ绯荤粺"

璺ㄥ煙鍒板簳鏄釜鍟ワ紵绠€鍗曡灏辨槸浣犲浣忓湪A灏忓尯锛宨frame浣忓湪B灏忓尯锛屼繚瀹変笉璁╀覆闂ㄣ€傚幓骞存湁涓數鍟嗛」鐩紝鍥犱负娌″鐞嗚法鍩熼棶棰樺鑷翠績閿€娲诲姩椤电槴鐥?灏忔椂锛屾崯澶辨儴閲嶅晩锛?/p>

娴忚鍣ㄧ殑鍚屾簮绛栫暐涓夎绱狅細

1. 鈥?strong>鈥嬪崗璁瀵逛笂鈥?/strong>鈥嬶紙http鍜宧ttps绠椾袱瀹讹級
2. 鈥?strong>鈥嬪煙鍚嶈鐩稿悓鈥?/strong>鈥嬶紙http://www.a.com鍜宎pi.a.com涔熶笉琛岋級
3. 鈥?strong>鈥嬬鍙ｈ涓€鑷粹€?/strong>鈥嬶紙榛樿80鍜?43闄ゅ锛?/li>

涓句釜鏍楀瓙馃尠锛?/p>

• 鐖堕〉闈細https://shop.com
• 瀛愰〉闈細http://shop.com 鉂?鍗忚涓嶅尮閰?/li>
• 瀛愰〉闈細https://pay.shop.com 鉂?浜岀骇鍩熷悕涓嶅悓

馃殌 绗?姝ワ細postMessage澶ф硶濂?/h3>

杩欐嫑灏卞儚缁檌frame鍙戝井淇℃秷鎭紝鏀寔璺ㄥ煙浼犺緭銆備笂涓湀甯鎴峰疄鐜扮洿鎾脊骞曞姛鑳藉氨闈犲畠锛?/p>

javascript澶嶅埗
// 鐖堕〉闈㈠彂娑堟伅
iframeEl.contentWindow.postMessage(
  { action: 'showDanmu', text: '鑰侀搧666' }, 
  'https://live.platform.com'
);

// 瀛愰〉闈㈡敹娑堟伅
window.addEventListener('message', (e) => {
  if(e.origin !== 'https://main.site.com') return;
  if(e.data.action === 'showDanmu') renderDanmu(e.data.text);
});

鈿狅笍 閲嶇偣鏉ヤ簡锛?/p>

• 鈥?strong>鈥嬪繀椤绘牎楠宱rigin鈥?/strong>鈥嬶紙鍘诲勾鏌愮ぞ浜ゅ钩鍙版病鍋氶獙璇佽榛戜骇鍒╃敤锛?/li>
• 澶嶆潅鏁版嵁寤鸿鐢↗SON.stringify鎵撳寘
• ios14浠ヤ笅鐗堟湰瑕佺壒娈婂鐞?/li>

馃寜 绗?姝ワ細鏋惰"閫氫俊妗?

纰板埌娌圭洂涓嶈繘鐨勭涓夋柟椤甸潰鎬庝箞鍔烇紵鎴戜滑鍙互鍦ㄨ嚜瀹舵湇鍔″櫒涓婇€犱釜涓棿灞傘€傚氨鍍忓揩閫掓煖锛屾妸涓滆タ鏆傚瓨鍦ㄥ畨鍏ㄥ尯锛?/p>

1. 鍒涘缓proxy.html鏀惧湪鍚屽煙鍚嶄笅
2. 鐢ㄨ繖涓〉闈㈠姞杞界洰鏍噄frame
3. 閫氳繃鍚屾簮閫氶亾浼犻€掓暟鎹?/li>

鏈€杩戞湁涓斂鍔￠」鐩敤杩欐嫑瀵规帴鏀粯瀹濓紝鎴愬姛閬垮紑璺ㄥ煙闄愬埗銆備唬鐮佺粨鏋勯暱杩欐牱锛?/p>

javascript澶嶅埗
// 浠ｇ悊椤甸€昏緫
const targetFrame = document.createElement('iframe');
targetFrame.src = 'https://third.party.com';
document.body.appendChild(targetFrame);

// 鐖堕〉鐩存帴鎿嶄綔浠ｇ悊椤电殑DOM
const proxyWindow = proxyIframe.contentWindow;
proxyWindow.document.getElementById('btn').click();

馃摗 绗?姝ワ細URL鏆楀彿鏈?/h3>

閫傚悎杞婚噺绾ф暟鎹紶閫掞紝姣斿淇敼涓婚銆佷紶閫掔増鏈彿銆傚師鐞嗗氨鍍忕壒鍔℃帴澶村鏆楄锛?/p>

javascript澶嶅埗
// 鐖堕〉闈㈡洿鏂癶ash
iframeEl.src = 'https://child.com/page#theme=dark&v=2.3';

// 瀛愰〉闈㈢洃鍚彉鍖?/span>
window.onhashchange = () => {
  const params = new URLSearchParams(location.hash.slice(1));
  applyTheme(params.get('theme')); 
};

浣嗚娉ㄦ剰涓夌偣锛?/p>

1. 鏁版嵁閲忓埆瓒呰繃2000瀛楃
2. 鏁忔劅淇℃伅璁板緱鍔犲瘑
3. 瀹夊崜寰俊娴忚鍣ㄥ彲鑳芥湁缂撳瓨闂

馃 绗?姝ワ細缁堟瀬姝﹀櫒window.name

杩欐嫑鐭ラ亾鐨勪汉涓嶅锛屼絾鍏抽敭鏃跺埢鑳芥晳鍛斤紒鍘熺悊鏄粰window.name杩欎釜灞炴€у綋涓存椂浠撳簱锛?/p>

javascript澶嶅埗
// 瀛愰〉闈㈣缃?/span>
window.name = JSON.stringify({ 
  userInfo: {name: '寮犱笁', vipLevel: 3}
});

// 鐖堕〉闈㈣鍙?/span>
const iframe = document.createElement('iframe');
iframe.src = 'https://child.com';
iframe.onload = () => {
  const data = JSON.parse(iframe.contentWindow.name);
  console.log(data.userInfo);
};

涓嶈繃瑕佸皬蹇冭繖涓睘鎬х殑鍏ㄥ眬鎬э紝鐢ㄥ畬鍚庤寰楁竻绌猴紝灏卞儚鐢ㄥ畬鍏帟瑕佸啿姘达綖

鈥?strong>鈥嬭俯鍧戣娉彶鈥?/strong>鈥嬶細

1. 寰俊娴忚鍣╔5鍐呮牳瑕佺壒娈婂鐞嗭紝寰楀姞杩欎釜meta鏍囩锛?

   html杩愯澶嶅埗
   http-equiv="X-Content-Security-Policy" content="script-src 'self'">

2. Safari鏈変釜濂囪懇璁惧畾锛歩frame蹇呴』瀹屽叏鍔犺浇鎵嶈兘閫氫俊锛岃寰楀姞涓欢鏃舵娴?/li>
3. 鍗庝负閮ㄥ垎鏈哄瀷鐨勫唴缃祻瑙堝櫒鍙兘涓嶆敮鎸丒S6璇硶

鈥?strong>鈥嬫柟妗堝姣旇〃鈥?/strong>鈥嬶細

涓婁釜鏈堟祴璇曟暟鎹樉绀猴紝鐢╬ostMessage鏂规鐨勫姞杞介€熷害姣斾唬鐞嗘柟妗堝揩47%锛屼絾鍐呭瓨鍗犵敤澶?2%銆傚叿浣撴€庝箞閫夊緱鐪嬮」鐩渶姹傦紝灏卞儚閫夊璞¤鐪嬪悎涓嶅悎閫傘€?/p>

鈥?strong>鈥嬬嫭瀹舵礊瀵熲€?/strong>鈥嬶細
鐜板湪寰堝鍥㈤槦婊ョ敤try-catch缁曡繃瀹夊叏绛栫暐锛岃繖绠€鐩存槸鍩嬮浄锛佸幓骞村府鏌愰噾铻嶅钩鍙伴噸鏋勬敮浠樻ā鍧楋紝鐢ㄨ鑼冨寲鐨勮法鍩熸柟妗堟妸鏀粯澶辫触鐜囦粠15%鍘嬪埌2%銆傝浣忥紝浠ｇ爜涓嶄粎瑕佽兘璺戯紝杩樺緱鑳芥椿杩囧畨鍏ㄥ璁★紒