vue のネストされた iframe パラメーターの通信

まず iframe とは何かを理解してください。

iframe は、Web ページ内に別の Web ページを埋め込むために使用される HTML 要素です。各 iframe は独自のグローバルウィンドウオブジェクトを維持します。
次のステップは iframe 間の通信です。これは通常、親ページから子ページにトークンを渡すために使用されます。

1. 親ページのコード

HTML

<template>
  <div >
    <iframe name="myiframe" id="myrame-record-query" src="http://192.168" 
    frameborder="0" align="middle" width="80%" height="900px"></iframe>
  </div>
</template>

js はvue のライフサイクルで
トークンパラメーターをサブコンポーネントに渡します

<script>
mounted() {
    
    
    var that = this
    this.iframe = document.getElementById('myrame-record-query')
    this.iframe.onload = function () {
    
    
      // iframe加载完成后要进行的操作  这里要等 iframe加载完毕
       let param = {
    
    
        token:"***"
      }
      this.iframe.contentWindow.postMessage(param, '*')*号可以指定任意域名
    }
}
</script>

2. サブページコード

子ページは親ページから渡されたパラメータを受け取ります

mounted() {
    
    
	window.addEventListener('message', (ev) => {
    
    
	      // 在这里可以打印一下ev  ev中的data属性是父级传的参数
	      console.log(ev.data);
	    })
}

子ページが親ページにデータを渡したい場合は、ここを展開してみましょう

サブページ

beforeCreate() {
    
    // 可以在生命周期 方法等 去传递方法给父页面
    window.parent.postMessage({
    
     "自定义键": "自定义值" }, '*') //*号可以指定任意域名
},

親ページ

これはサブページがデータを受け入れる方法と同じです

mounted() {
    
    
	window.addEventListener('message', (ev) => {
    
    
	      // 在这里可以打印一下ev  ev中的data属性是子级传的参数
	      console.log(ev.data);
	  })
 }

亿点小知识 親ページが子ページにパラメータを渡すとき、 ev.data が未定義であることがあります。このとき、パニックにならないでください。まず、data
に余分な type 属性があることを観察しましょうtype: "webpackOk"。これは、パッケージが iframe を 1 回呼び出すためです。開発中に、その型を運ぶ型をフィルターで除外できます。
iframe传参undefined
以上がiframeのネスト通信の方法です。他にご質問がある場合は、私にプライベートメッセージを送って一緒に話し合うことができます。