hellobaby

更新时间:2022-12-30 14:17:10 阅读: 评论:0


2022年12月30日发(作者:this is my life)

iframe的调用包括以下几个方面:(调用包含html dom,js全局变量,js方法)



主页面调用iframe;



iframe页面调用主页面;



主页面的包含的iframe之间相互调用;







主要知识点



1:mentById("ii").contentWindow 得到iframe对象后,就可以通过contentWindow得到iframe包含页面的window对象,然后就可以正常访问页面元素了;



2:$("#ii")[0].contentWindow 如果用jquery选择器获得iframe,需要加一个【0】;



3:$("#ii")[0].contentWindow.$("#dd").val() 可以在得到iframe的window对象后接着使用jquery选择器进行页面操作;



4:$("#ii")[0].aby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa"; 可以通过这种方式向iframe页面传递参数,在iframe页面aby就可以获取到值,hellobaby是自定义的变量;



5:在iframe页面通过parent可以获得主页面的window,接着就可以正常访问父亲页面的元素了;



6:parent.$("#ii")[0].; 同级iframe页面之间调用,需要先得到父亲的window,然后调用同级的iframe得到window进行操作;







源码



源码包含内容,主页面()中含有两个iframe子页面(,)



主页面如何调用子页面中的方法;

子页面如何调用主页面中的方法;

两个子iframe之间如何如何进行交互









<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; chart=utf-8">

<title>显示图表</title>

<script src="//scripts/" type="text/javascript"></script>

<script type="text/javascript">

var gg="dsafdsafdsafdsafsdaf";

function ggMM() {

alert("2222222222222222222222222222222");

}

function callIframeMethod() {

//mentById("ii").();

$("#ii")[0].(); //用jquery调用需要加一个[0]

}

function callIframeField() {

alert($("#ii")[0].);

}

function callIframeHtml() {

alert($("#ii")[0].contentWindow.$("#dd").val());

//alert($("#ii")[0].mentById("dd").value);

//alert($("#ii")[0].mentById("dd").value);

}

function giveParameter() {

$("#ii")[0].aby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa";

}

</script>

</head>

<body>

<a href="#&

quot; onClick="giveParameter();">参数传递</a>

<a href="#" onClick="callIframeMethod();">调用子iframe方法</a>

<a href="#" onClick="callIframeField();">调用子iframe变量</a>

<a href="#" onClick="callIframeHtml();">调用子iframe组件</a></br>

<iframe id="i

i" src="" width="100%" frameborder="0"></iframe>

<iframe id="new" src="" width="100%" frameborder="0"></iframe>

</body>

</html>











<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; chart=utf-8">

<title>显示图表</title>

<script src="//scripts/" type="text/javascript"></script>

<script type="text/javascript">



var ff="adfdasfdsafdsafdsaf";

function test() {

alert($("#dd").val());

}

function callMainField() {

alert();

}

function callMainMethod() {

();

}

function callMainHtml() {

alert(parent.$("#ii").attr("id"));

}

function getParameter() {

alert(aby);

}

</script>

</head>

<body>

<a href="#" onClick="getParameter();">接受参数</a>

<a href="#" onClick="callMainMethod();">调用子iframe方法</a>

<a href="#" onClick="callMainField();">调用主窗口变量</a>

<a href="#" onClick="callMainHtml();">调用子iframe组件</a>

<input id="dd" type="text" value="1111111111"/>

</body>

</html>



兄弟iframe页面







<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; chart=utf-8">

<title>显示图表</title>

<script src="//scripts/" type="text/javascript"></script>

<script type="text/javascript">

function callLevelFrame() {

var ff=parent.$("#ii")[0].;

alert(ff);

}

</script>

</head>

<body>

<a href="#" onClick="callLevelFrame();">调用兄弟iframe</a>

<input id="nn" type="text" value="sdafsdfsa"/>

</body

>

</html>



本文发布于:2022-12-30 14:17:10,感谢您对本站的认可!

本文链接:http://www.wtabcd.cn/fanwen/fan/90/60291.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

上一篇:学大家教
下一篇:网络故事
标签:hellobaby
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图