欢迎光临
我们一直在努力

jquery操作iframe的方法:父页面和子页面相互操作的方法

建站超值云服务器,限时71元/月

今天在弄jquery操作iframe中元素:先由iframe中的子页面b.html给外面的父页面a.html页面传值,再将a.html页面计算机的值放到b.html页面上,这里就用到子页面和父页面相互传值,相互调用更自函数这些功能,这里我用一个简单的例子来介绍一下这些方法。
a.html

<script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function f()
{
	$('#a').contents().find("#bbb").val("ddd"); 
}
function fun()
{
	alert('弹出子页面调用的函数');
}
</script>
<div id="maindiv">test</div>
<iframe id="a" name="a" src="b.html" width="600" height="400"></iframe><br />
<input type="button" value="给子页面表单赋值" onclick="f()" />

(鼠标移到代码上去,在代码的顶部会出现四个图标,第一个是查看源代码,第二个是复制代码,第三个是打印代码,第四个是帮助)

b.html

<script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function f()
{
	alert('开始调用父页面函数');	
	$(window.parent.fun());
	$(window.parent.$("#maindiv").html("子页面赋过来的值"));
}
</script>
<form name="cform"><input type="text" name="b" id="bbb" /><input name="btn" type="button" onclick="f()" value="调用父函数并给父页面元素赋值" /></form>

(鼠标移到代码上去,在代码的顶部会出现四个图标,第一个是查看源代码,第二个是复制代码,第三个是打印代码,第四个是帮助)

大家运行一下a.html,试着点击一下里面在按纽,看看效果。

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » jquery操作iframe的方法:父页面和子页面相互操作的方法
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址