vue 修改iframe 内样式及父子页面方法调用

最新推荐文章于 2024-08-22 09:05:48 发布

90后_9527

最新推荐文章于 2024-08-22 09:05:48 发布

阅读量9.3k

点赞数 2

分类专栏： vue学习文章标签： vue.js

本文链接：https://blog.csdn.net/qq_41802862/article/details/121232860

版权

vue学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.修改iframe内样式

<template>
  <div class="interface-body">
    <iframe @load="frm" id="pdf-box" src="../../static/pdf/web/viewer.html?file=/static/pdf/web/demo.pdf"></iframe>
  </div>
</template>
<script>
export default{
	methods：{
		frm(){
	      let iframeBox=document.getElementById("pdf-box");
	      let _obj=iframeBox.contentWindow || iframeBox.contentDocument;
	      let doc=_obj.document;
	      let _box=doc.getElementById("viewer");
	      _box.style.background="#f00"
    	},
	}
}
</script>

2.父HTML调用iframe内方法

//父页面
<html>
	<iframe id="myIframe" src="http://www.baidu.com"></iframe>
	<button onclick="clickHandler">调用子页面方法</button>
</html>
<script>
function clickHandler(){
	var _iframe=document.getElementById("myIframe");
	var _obj=_iframe.contentWindow || _iframe.contentDocument;
	_obj.subFunction();
}
</script>
//子页面
<script>
function subFunction(){
	console.log("调用了子页面方法")
}
</script>

3.普通HTML页面中子iframe中调用父html中方法

<script>
parent.function(data1,data2...)
</script>

4.vue 中子iframe中调用父页面中方法

//父页面
<script>
export default{
	mounted(){
		window.myconsole = this.myconsole;// 这里需要暴露给全局，这样的话，子页面才能调用相对应的方法
	},
	methods：{
		myconsole (){
	      console.log("这里是调用父元素中的方法");
    	},
	}
}
</script>
//子页面
<script>
	window.parent.myconsole();
</script>