JavaScript实现iframe中操作父类的input

2014-10-18把我给崩了 的分享   加三联MM小编微信好友:sanlian2018

  iframe中操作父类的input

  window.parent.document.getElementById('mark2').value=$('#rightPointer').val();

  在父窗口中操作 选中IFRAME中的所有输入框:

  $(window.frames["iframeSon"].document).find(":text");

  在IFRAME中操作 选中父窗口中的所有输入框:

  $(window.parent.document).find(":text");

  在IFRAME中操作 选中父窗口中的所有单选钮

  $(window.parent.document).find("input[@type='radio']").attr("checked","true");

  示例

  父对象得到子窗口的值

 代码如下  

//ObjectID是窗口标识,ContentID是元素ID
function GetValue(ObjectID,ContentID)
{
var IsIE = (navigator.appName == 'Microsoft Internet Explorer')
if(IsIE)
{//如果是IE  
alert(document.frames(ObjectID).document.getElementById(ContentID).innerHTML);  
}
else
{//如果是FF
 alert(document.getElementById(ObjectID).contentDocument.getElementById(ContentID).innerHTML);
//FF下不支持innerText; 下面是解决方法
//if(document.all){
//  alert(document.getElementById('div1').innerText);
//} else{
//  alert(document.getElementById('div1').textContent);
//}
}    
}
 
父对象向子窗口赋值

//ObjectID是窗口标识,ContentID是元素ID
function SetValue(ObjectID,ContentID)
{
var IsIE = (navigator.appName == 'Microsoft Internet Explorer')
if(IsIE)
{//如果是IE  
document.frames(ObjectID).document.getElementById(ContentID).innerHTML="我是IE下通过父窗口赋值过来的";
}
else
{//如果是FF
 document.getElementById(ObjectID).contentDocument.getElementById(ContentID).innerHTML="我是FF下通过父窗口赋值过来的";    
}    
}

1.父窗口对子窗口操作
 

取值:
//父窗口取子窗口的值
       GetValue("Iframe1","IframeDiv");
 
赋值:

//父窗口设置窗口元素的值;
       SetValue("Iframe1","IframeDiv");  

  2.子窗口操作父窗口

  取值:

  alert(window.parent.document.getElementById("IframeDiv").innerHTML);

  赋值:

  window.parent.document.getElementById("IframeDiv").innerHTML="我是从子窗口IFRAME传过来的值";

  工作有用到的例子

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

  a.html

 代码如下  
[html] view plaincopy
<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>
   
 

TA发布的帖子

881

收藏

605