記事ディレクトリ
要件の説明
私たちの作業では、iframe を使用して別のページをネストするためのいくつかの要件が発生します。ほとんどの場合、このページは親ページと同じドメイン名でデプロイされませんが、親ページと子ページの間でデータのやり取りが必要です。毛織物でしょうか？
始める
上位コード
親ページ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="./common.css" />
<title>Document</title>
</head>
<body>
<h2>父页面</h2>
<button onclick="doAction()">❤ 点击触发父页面的事件 ❤</button>
<br />
<iframe
id="iframeContainer"
name="iframePage"
src="./iframe-page.html"
frameborder="0"
scrolling="no"
>
</iframe>
<script>
const doAction = () => {
console.log("父页面的事件");
};
</script>
</body>
</html>
iframeページ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
queryName="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" type="text/css" href="./common.css" />
<title>Document</title>
</head>
<body style="background-color: black">
<h2>iframe页面</h2>
<button onclick="iframeDoAction()">❤ 点击触发iframe页面的事件 ❤</button>
<script>
const iframeDoAction = () => {
console.log("iframe页面的事件：iframeDoAction");
};
</script>
</body>
</html>
親から子に値を渡す
方法 1: URL 経由でパラメータを渡す
親ページにコードを追加
// 页面初始化完成自动传递数据给子页面 方案一：--start
const iframeDom = document.getElementById("iframeContainer");
let url = iframeDom.src + "?id=1&name=糖豆豆"; //拼接上需要传递的参数
document.getElementById("iframeContainer").src = url;
// 页面初始化完成自动传递数据给子页面 方案一：--end
iframe ページ追加コード
// 页面初始化完成自动传递数据给子页面 方案一：--start
function getUrlQuery(queryName) {
var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return r[2];
return null;
}
window.onload = function () {
console.log("iframe页面的事件：window.onload");
console.log(getUrlQuery("id"), decodeURIComponent(getUrlQuery("name")));
};
// 页面初始化完成自动传递数据给子页面 方案一：--end
方法 2: window.postMessage() メソッドを使用する
親ページにコードを追加
// 父页面传递数据给子页面：--start
const doAction = () => {
console.log("父页面的事件");
let send = document.getElementById("iframeContainer").contentWindow;
send.postMessage("我是父页面发的数据", "*");
};
// 父页面传递数据给子页面：--end
iframe ページ追加コード
// 父页面传递数据给子页面：--start
const iframeReceiveData = (data) => {
console.log("iframe页面的事件：iframeReceiveData");
console.log(data)
};
window.onload = function(){
window.addEventListener('message',function(e){
iframeReceiveData(e.data)
})
}
// 父页面传递数据给子页面：--end
予防
postMessage メソッドには 3 つのパラメータがあります
- パラメータ 1: 送信されるデータ。
- パラメータ 2: メッセージ イベントを受信できるウィンドウ。メッセージ イベントを受信するウィンドウを指定するために使用されます。その値は URI または文字列 "*" (無制限を示す) です。 例: window.postMessage('hello!', 'http ://127.0.0.1:5005');
- パラメータ 3: これは、メッセージとともに渡される Transferable オブジェクトの文字列です。これらのオブジェクトの所有権はメッセージの受信者に譲渡され、送信者は所有権を保持しなくなります。
postMessage受信側の使い方は？
- e.source -- メッセージ ソース、メッセージが送信されるウィンドウ/iframe
- e.origin – データ ソースの検証に使用されるメッセージ ソースの URI
- e.data – データ
子から親に値を渡す
方法 1: グローバル変数を使用して処理する
親ページにコードを追加
window.onload = function(){
console.log(document.getElementById('iframeContainer').contentWindow.commonData4)
console.log(document.getElementById('iframeContainer').contentWindow.commonData5)
console.log(document.getElementById('iframeContainer').contentWindow.commonData6)
// 调用方法
document.getElementById('iframeContainer').contentWindow.commonData6()
}
iframe ページ追加コード
var commonData4 = { name: "xiaojin", id: 1 };
var commonData5 = 'xiaojin'
var commonData6 = ()=>{console.log(123)}
一緒に効果を見てみましょう
方法 2: window.parent.postMessage() メソッドを使用する
親ページにコードを追加
// 子页面传输数据给父页面 方案二： ---start
window.onload = function(){
window.addEventListener('message',function(e){
console.log(e.data)
})
// 子页面传输数据给父页面 方案二： ---end
iframe ページ追加コード
// 子页面传输数据给父页面 方案二： ---start
const iframeDoAction = () => {
console.log("点击触发iframe页面的事件：iframeDoAction");
window.parent.postMessage("I am xiaojin", "*");
};
// 子页面传输数据给父页面 方案二： ---end
効果を見てみましょう~
追加される
- 今日はここに書きます〜
- 友達、(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ また明日~~
- みんなも毎日幸せになろうね
記事の修正が必要な箇所はどなたでもご指摘ください~
学習には終わりがなく、協力は双方に利益をもたらします
