您的位置：首页 > 其它

iframe使用方法

2015-12-18 20:05 459 查看
<iframe name="myiframe" src="/i/eg_landscape.jpg"></iframe>

父页面给iframe中的子页面传值，把值写入子页面的文本框里

father.html:

<script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>  

<script type="text/javascript">  

function fuzhi()  

{  

    $('#son').contents().find("#b").val("父页面传过来的值！");   

}  

</script>  

<iframe id="son" name="son" src="son.html" width="400" height="200"></iframe><br />  

<input type="button" value="给子页面表单中id为b的文本框赋值" onclick="fuzhi()" /> 

son.html:

<form name="form2"><input type="text" name="b" id="b" /></form>

-------------------------------------------------------------------------------------------------------------

iframe中的子页给父页面传值

father.html

<script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>  

<div id="messagediv">test</div>  

<iframe id="son" name="son" src="son.html" width="400" height="200">

</iframe>

son.html

<script type="text/javascript">  

function fuzhi()  

{  

    $(window.parent.$("#messagediv").html("子页面赋过来的值"));  

}  

</script>  

<form name="form2"><input name="btn1" type="button" onclick="fuzhi()" value="给父页中id为messagediv的元素赋值" /></form>

-----------------------------------------------------------------------------------------------------------------------------------------

子页面如何调用父页面中的函数

father.html

<script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>  

<script type="text/javascript">  

function fun()  

{  

    alert('这是父页面中的函数弹出窗口哦！');  

}  

</script>   

<iframe id="son" name="son" src="son.html" width="400" height="200"></iframe>

son.html

<script type="text/javascript">  

function diaoyong()  

{      

    $(window.parent.fun());  //调用父页面函数  

}  

</script>  

<form name="form2"> <input name="btn1" type="button" onclick="diaoyong()" value="调用父页面中的函数" /></form>

----------------------------------------------------------------------------------------------------------------------------

父窗口调用iframe子窗口方法 

1、HTML语法：<iframe name="myFrame" src="child.html"></iframe> 

2、父窗口调用子窗口：myFrame.window.functionName(); 

3、子窗品调用父窗口：parent.functionName(); 

简单地说,也就是在子窗口中调用的变量或函数前加个parent.就行 

4、父窗口页面源码： 

复制代码 代码如下:

<html> 

<head> 

<script type="text/javascript"> 

function say() { 

alert("parent.html------>I'm at parent.html"); 

} 

function callChild() 

{ 

//document.frames("myFrame").f1(); 

myFrame.window.say(); 

} 

</script> 

</head> 

<body> 

<input type=button value="调用child.html中的函数say()" onclick="callChild()"> 

<iframe name="myFrame" src="child.html"></iframe> 

</body> 

</html> 

5、子窗口页面： 

复制代码 代码如下:

<html> 

<head> 

<script type="text/javascript"> 

function say() 

{ 

alert("child.html--->I'm at child.html"); 

} 

function callParent() { 

parent.say(); 

} 

</script> 

</head> 

<body> 

<input type=button value="调用parent.html中的say()函数" onclick="callParent()"> 

</body> 

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