iframe通过js两个页面传参

最新推荐文章于 2025-03-14 16:54:39 发布

shenhua

最新推荐文章于 2025-03-14 16:54:39 发布

阅读量9.5k

点赞数

分类专栏： JS 文章标签： iframe javascript xhtml html input

本文链接：https://blog.youkuaiyun.com/xiezhiyong3621/article/details/6791938

版权

JS 专栏收录该内容

16 篇文章

订阅专栏

最近碰到个问题, 要在Iframe之间传值和数据, 因为页面对像的不同, 一个ifram页面中的form值和数据直接get或Post都是传不到另一个iframe页面的, 设置taget也没有用,  在网上找了很久 没有很好的方法. 只有通过js来实现. 

   两个重要的javascript语句:

top.result.document.location='result.html?data=' + data;

和

window.top.frames['result'].document.getElementById("an").innerHTML=data;

都很好理解,  第一个就是js重新载入父窗口中name为result的iframe页面,  第二个就是直接通过选择另一个iframe中的元素来赋值.


下面是一个传值的例子

框架页面-index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>框架页面</title>  
</head>
<body>
<iframe width="100%" height="100" name="find" id="find" src="find.html"></iframe>
<iframe width="100%" height="600" name="result" id="result" src="result.html"></iframe>
</body>
</html>
 

查询页面-find.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>查询页面</title>
<script language="javascript"  type="text/javascript">
function show(){
var data = document.form1.data.value;  
top.result.document.location='result.html?data=' + data;
//window.top.frames['result'].document.getElementById("an").innerHTML=data;
}
</script>
</head>
<body>
<div >
  <form name="form1" method="post" >
        <p><span>数据：</span>
          <input type="text" name="data" class="text" id="text1"/>
        </p>
        <p>
     <input   type="submit" value="提交" οnclick="javascript:show();" /> 
        </p>
  </form>
</div>
</body>
</html>

结果页面-result.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>结果页面</title>
</head>
<body>
<p>上面输入的文字是: <span id="an"> </span></p>
</body>
<script language="javascript"  type="text/javascript">
function Request(argname)
{
    var url = document.location.href;
    var arrStr = url.substring(url.indexOf("?")+1).split("&");
    //return arrStr;
    for(var i =0;i<arrStr.length;i++)
        {
        var loc = arrStr[i].indexOf(argname+"=");
        
        if(loc!=-1)
            {
            return arrStr[i].replace(argname+"=","").replace("?","");
            break;
            }
        }
    return "";
}
//使用Request("argname")即可得到参数值; 
var data=Request("data");  
this.document.getElementById('an').innerHTML= data;
</script>
</html>

今天遇到的是jsp中，不能重复实例类的方法时，只能通过参数来改变数据。所以通过这个方法可以不重复实例。很给力啊