实现动态嵌套Iframe、父子页面方法互相调用

最新推荐文章于 2024-04-15 15:25:05 发布

君宝贝

最新推荐文章于 2024-04-15 15:25:05 发布

阅读量530

点赞数

文章标签： jquery html

本文链接：https://blog.csdn.net/weixin_43022750/article/details/115629128

版权

Iframe父子页面方法互相调用

应用于一个页面种嵌套一个iframe组件，src需要默认为空
示例：
父页面代码：
<!doctype html>

<h3>父页面</h3>
<iframe id="zi" src="b.html" ></iframe>
<br>

<script>
	function getfu(){
		alert("这里是父页面getfu的方法");
	}
	
	function getZi(){
		document.getElementById("zi").contentWindow.ziParams();
	} 
</script>
<input type="button" value="调用子页面方法" onclick="getZi()" />

子页面代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
	<h3>子页面</h3>
	<input type="button" value="调用父页面方法" onclick="fuParams()" />
	<script>
		function ziParams(){
			alert("这里是子页面的方法");
		}
		
		function fuParams(){
			//父级页面方法
			window.parent.getfu();
		}
		
	</script>
</body>
</html>

实现动态嵌套Iframe

动态嵌套不同的Iframe的原理是更改src属性值
示例：

<div class="toolbarLineDiv">
       	 <div id="type" name="type"  class="mini-radiobuttonlist"  repeatItems="2"  repeatDirection="vertical"
              textField="text" valueField="id" value="1"  data="[{id: 1, text: '页面1'}, {id: 2, text: '页面2'}, {id: 3, text: '页面3'}, {id: 4, text: '页面4'}, {id: 5, text: '页面5'}]" ></div> 
      </div>

var type = mini.get("type");
type.on("valuechanged", function (e) {
    if(this.getValue()=='1'){
    	$("#aa")[0].src="页面1.html";
    }else if(this.getValue()=='1'){
       $("#aa")[0].src="页面2.html";
    }...
});

君宝贝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现动态嵌套Iframe、父子页面方法互相调用

Iframe父子页面方法互相调用应用于一个页面种嵌套一个iframe组件，src需要默认为空示例：父页面代码：<!doctype html><h3>父页面</h3><iframe id="zi" src="b.html" ></iframe><br><script> function getfu(){ alert("这里是父页面getfu的方法"); } function getZi
复制链接

扫一扫