今天在做项目时,遇到了在一个iframe中调用兄弟iframe中的元素,现实开发中难免会遇到子页面、父页面相互操作的情况,由于时不时地会遇到几次(不是一次),所以就整理了一下父子页面相互相互调用常见的方法,作为自己的备忘录,同时也希望对大家有帮助。
下面话不多说了,来一起看看详细的介绍吧。
父页面代码 main.html 如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IFrame的数据传递</title>
<style type="text/css">
.span{
word-break:normal;
width:auto;
display:block;
white-space:pre-wrap;
word-wrap : break-word ;
overflow: hidden ;
}
</style>
</head>
<body>
<p>
<a href="javascript:void(0)" onClick="sendParameter();">参数传递</a>
</p>
<p>
<a href="javascript:void(0)" onClick="callIframeMethod();">调用子iframe方法</a>
</p>
<p>
<a href="javascript:void(0)" onClick="callIframeField();">调用子iframe变量</a>
</p>
<p>
<a href="javascript:void(0)" onClick="callIframeHtml();">调用子iframe组件</a></br>
</p>
<iframe id="hanpang" src="top.html" width="100%" frameborder="1"></iframe>
<iframe id="new" src="MyHtmssssssssssssl.html" width="100%" frameborder="1"></iframe>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var parentVal = "我是父页面定义的变量";
function sendParameter(){
//myValue 是传递的变量
$("#hanpang")[0].contentWindow.myValue="我是胖先森";
}
function callIframeMethod() {
//document.getElementById("hanpang").contentWindow.myTest();
$("#hanpang")[0].contentWindow.myTest(); //用jquery调用需要加一个[0]
}
function callIframeField() {
alert($("#hanpang")[0].contentWindow.message);
}
function callIframeHtml() {
// #name 是 myFrame页面中控件ID
alert($("#hanpang")[0].contentWindow.$("#name").val());
//alert($("#hanpang")[0].contentWindow.document.getElementById("dd").value);
//alert($("#hanpang")[0].contentWindow.document.getElementById("dd").value);
}
function say() {
var div=document.createElement("div");
div.style.width="100px";
div.style.height="200px";
div.style.backgroundColor="red";
div.style.position="absolute";
div.style.left="700px";
div.style.top="190px";
div.style.zIndex=9999;
if(document.all)
div.style.filter = "alpha(opacity=30)";
else div.style.opacity = .3;
parent.document.body.appendChild(div);
}
</script>
</body>
</html>
子页面1 :
top.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子页面</title>
</head>
<body>
<a href="javascript:;" οnclick="getParamter()">接受参数</a>
<a href="javascript:;" onClick="callMainMethod();">调用主窗口方法</a>
<a href="javascript:;" onClick="callMainField();">调用主窗口变量</a>
<a href="javascript:;" onClick="callMainHtml();">调用主窗口组件</a>
<input id="name" type="text" value="我要学习"/>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var message = "消息:打赏啊!";
function getParamter() {
alert(window.myValue);
}
function callMainMethod() {
parent.say();
}
function callMainField() {
alert(parent.parentVal);
}
function callMainHtml() {
alert(parent.$("#hanpang").attr("id"));
}
function myTest() {
alert($("#name").val());
}
</script>
</body>
</html>
子页面2
MyHtmssssssssssssl.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="javascript:;" onClick="callLevelFrame();">调用兄弟iframe</a>
<input id="new_iframe" type="text" value="我的新值"/>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function callLevelFrame() {
var message=parent.$("#hanpang")[0].contentWindow.message;
alert(message);
}
</script>
</body>
</html>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持