iframe传值方式

Wyliss

已于 2023-04-28 10:13:59 修改

阅读量696

点赞数

分类专栏： vue vue3.0 文章标签： javascript 前端 json

于 2022-09-28 17:56:12 首次发布

本文链接：https://blog.csdn.net/YhWyl527/article/details/127094147

版权

vue 同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

1.父级项目（2.0系统）通过 *************地址?username= $KaTeX parse error: Expected 'EOF', got '&' at position 17: \dotsusername.value}&̲password=$ {password.value}& 拼接参数形式传递参数
子级项目（子系统）通过window.location.hash.split(“?”)[1]接收到
2.api方式

v3部分（父系统）

//html
<iframe :src="link" width="100%" height="100%" ref="iframeRef"></iframe>

这里需要参照官方文档查看传值注意点地址
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

js setup
//数据传递
let username = ref(storage.local.get("username"));
let password = ref(storage.local.get("password"));

let assObj = reactive({
	username:username.value,
	password:password.value
})
const str = JSON.stringify(assObj)
console.log(str)

let iframeRef = ref(null);
let iframeWindow =  ref('')
onMounted(()=>{
	iframeWindow = iframeRef.value.contentWindow;
	console.log(iframeRef,iframeWindow)
  	sendMessage();
})
const sendMessage = () => {
	
  if (iframeRef.value.attachEvent) {
    // 兼容IE浏览器判断 ie的window.onload 是隐藏的 需要用attachEvent注册
    iframeRef.value.attachEvent("onload", function () {
      //postMessage（message,origin） 向iframe发送参数
      //message：iframe接收的参数，最好字符串   origin：其值可以是字符串"*"（表示无限制）或者一个url
      iframeWindow.postMessage(str, '*');
    });
  } else {
    iframeRef.value.onload = function () {
      iframeWindow.postMessage(str, '*');
    };
  }
};

v2子系统

 mounted() {
    window.addEventListener("message", (event) => {
      this.value = event.data;
      console.log("这里是父项目传来的值", event.data);
    });
  },