vue 调用iframe中的方法
要调用iframe中的方法,需要使用window对象的postMessage方法。postMessage方法允许不同窗口之间安全地传递消息,并在消息到达时触发事件。以下是一个示例:
1. 在父级vue组件中定义一个iframe元素,并添加一个message事件:
<template>
<div>
<iframe ref="myIframe" src="
</div>
</template>
<script>
export default {
mounted() {
window.addEventListener("message", iveMessage, false);
},
methods: {
receiveMessage(event) {
if (igin !== " return;
console.log(event.data); 假设iframe中返回了一个字符串
},
callIframeMethod() {
const target = tWindow;
const message = {
type: "callMethod",
method: "myMethod",
args: ["arg1", "arg2"]
};
target.postMessage(message, "
}
}
};
</script>
2. 在iframe中定义一个方法myMethod:
<html>
iframe参数传递 <body>
<script>
function myMethod(arg1, arg2) {
console.log("myMethod called with args:", arg1, arg2);
return "result";
}
</script>
</body>
</html>
3. 在父级vue组件中调用iframe中的方法:
Method("arg1", "arg2");
这里的关键是要确保postMessage方法的第二个参数指定了正确的源(即iframe的源),以避免安全问题。另外,也要确保接收到的消息来自正确的源。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论