您的位置：首页 > Web前端 > HTML

html iframe 元素之间的调用

2015-12-03 15:22 501 查看
html iframe 元素之间的调用
一、简介
　　一般需要引入一个独立页面的时候，我们会使用iframe。在业务需要的时候，我们需要在父页面与iframe页面之间进行交互。交互的时候，我们就需要使

用到js或jquery对父页面或子页面中的相关元素进操作。
二、示例
　　1、页面结构如下：

　　父页面：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>父页面</title>
<script  type="text/javascript"   src="jquery-1.8.3.min.js"></script>
</head>
<body>
<input id="username" name="username" value="zhangsan" />
<button onclick="getIframeEle();">change iframe1 from js</button>
<button onclick="getIframeEle2();">change iframe1 from jquery</button>
</br>
<iframe id="t_sub" name="myFrame"  src="./sub.html"> </iframe>
<iframe id="t_sub2" name="myFrame2"  src="./sub2.html"> </iframe>
<script type="text/javascript">
function getIframeEle(){ //通过js父页面操作子页面中的元素
var childdoc = document.getElementById("t_sub").contentWindow.document;
var childele = childdoc.getElementById("tname");
childele.value = "chang from parent" + new Date();
console.log(childele.value);
}
function getIframeEle2(){//通过jquery父页面操作子页面中的元素
//console.log($(document.frames("t_sub").document));
var childele = $(document.getElementById('t_sub').contentWindow.document).find("#tname");
childele.val("jquery iframe");
console.log(childele.val());
}

// 计算页面的实际高度，iframe自适应会用到
function calcPageHeight(doc) {
var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
var height  = Math.max(cHeight, sHeight)
return height
}
var ifr = document.getElementById('t_sub2')
ifr.onload = function() {
var iDoc = ifr.contentDocument || ifr.document
var height = calcPageHeight(iDoc)
ifr.style.height = height + 'px'
}
</script>
</body>
</html>


　　子页面一

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>子页面一</title>
<script  type="text/javascript"   src="jquery-1.8.3.min.js"></script>
</head>
<body>
<input id="tname" value="test" />
<button onclick="getParentEle();">change parent from js</button>
<button onclick="getBrothertEle2();">change brother iframe from js</button>
<button onclick="getParentEle2();">change parent iframe from jquery</button>
<script type="text/javascript">
<!--
function getParentEle(){//通过js获取并操作父页面的元素
var par_input =    parent.document.getElementById("username");
par_input.value = "change from iframe" + new Date();
console.log(par_input.value)
}
function getParentEle2(){//通过jquery获取并操作父页面中的元素
var usernameELe = $('#username', parent.document);
usernameELe.val("change from child iframe ");
console.log(usernameELe.val());
}
function getBrothertEle2(){//通过js获取并操作兄弟iframe中的元素
var parentDOM = parent.document.getElementById("t_sub2").contentWindow.document;;
var borele = parentDOM.getElementById('tname2');
borele.value = "change from brother iframe" + new Date();
console.log(borele.value)
}
//-->
</script>
</body>
</html>


　　子页面二

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>子页面二</title>
</head>
<body>
<input id="tname2" value="test22" />
<a href="javascript:void(0);" onclick="test(this);" >test</a>
<br/><br/><br/><br/><br/><br/><br/>
<script type="text/javascript">
function test(this_){
window.parent.location.href="http://www.baidu.com";
}
</script>
</body>
</html>


　　页面效果如下图所示：

　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航