iframe の親ページと子ページの間でデータを転送するには、いくつかの方法があります。
父から息子へ
1. URLパラメータの受け渡し
データは、iframe の src 属性の URL パラメーターの形式でサブページに渡すことができ、サブページは location.search を通じて URL パラメーターを取得できます。
親ページ:
<iframe src="child.html?name=John&age=25"></iframe>
サブページ:
var params = new URLSearchParams(location.search);
var name = params.get('name');
var age = params.get('age');
console.log(name);
console.log(age);
2. postMessage メソッドの配信
親ページの postMessage メソッドを使用してサブページにメッセージを送信し、サブページのメッセージ イベントをリッスンしてメッセージを取得できます。
親ページ:
var iframe = document.querySelector('iframe');
$("button").click(function(){
iframe.contentWindow.postMessage('Hello', 'http://127.0.0.1:5501/iframe研究子页面.html');
})
サブページ:
window.addEventListener('message', function(event) {
console.log(event.data); // 'Hello'
console.log(event.origin); // 'http://example.com'
});
注:
(1) iframe.contentWindow.postMessage はイベントでトリガーされる必要があり、直接配信は無効です
(2) postMessage メソッドの 2 番目のパラメーターは、プロトコル、ホスト名、ポートを含む完全な URL アドレスである必要があります。それ以外の場合は「無効」ターゲットオリジン」というエラーが表示されます。子ページが親ページと同じドメイン名の下にない場合は、正しいプロトコル、ホスト名、およびポートを使用して URL を指定する必要があります。
3. LocalStorage配信
親ページではlocalStorageを通じてデータを設定し、子ページではストレージイベントをリッスンしてデータを取得できます。
親ページ:
localStorage.setItem('name', 'John');
サブページ:
window.addEventListener('storage', function(event) {
console.log(event.key); // 'name'
console.log(event.newValue); // 'John'
});
注: localStorage は、同じドメイン名でのデータ変更のみを監視でき、異なるドメイン名でのデータ変更を監視できません。
4. ウィンドウオブジェクトの転送
親ページではウィンドウオブジェクトを通じてデータを設定し、子ページではウィンドウオブジェクトを通じてデータを取得できます。
親ページ:
window.myData = {
name: 'John', age: 25};
サブページ:
console.log(window.myData); // {name: 'John', age: 25}
注: このメソッドのデータは共有されており、どのページでもこのデータにアクセスして変更できますが、安全性が十分ではありません。
子传父
子ページは、親を通じて親ページの DOM を取得し、関数を呼び出してデータを渡すことができます。
子ページ:
parent.myfunction("张三") //parent.函数名(参数)
親ページ:
myfunction(data){
console.log(data) //张三
}