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>
# vue.js
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟