您的位置：首页 > Web前端 > JavaScript

用javascript如何在框架间传值

2014-02-13 10:58 225 查看 
比如一个左右型的框架，右边框架有一个文本框，当我点击左边框架内的一个按钮后可以将右边框架内文本框中的文字取过来显示到左边框架里面

frame传参不用ajax的
//index.html
<style>
a {
display:block;
margin-bottom:20px;
width:30px;
}
iframe {
width:400px;
height:300px;
border:1px solid #000;
}
</style>
<script>
window.onload=function(){
document.getElementById('x').onclick=function(){
frames['_left'].document.getElementById('a').innerHTML=frames['_right'].document.getElementById('b').value.replace(/
\n/g,'<br />');
}
}
</script>
<a href="#" id="x">点</a>
<iframe name="_left" src="1.html"></iframe>
<iframe name="_right" src="2.html"></iframe>
//1.html
<div id="a" style="background:#000;color:#fff;width:300px;height:400px;"></div>
//2.html
<textarea id="b" style="width:300px;height:300px;">
测试
</textarea>

222222222222222222222

这个依然是为我的项目而服务的，因为项目的功能需要此技术来实现，或许对很多人来说这个不难，可是对我这个不太对JavaScript感冒的人来说就不是那么容易了，办法只有一个：找资料现学呗。

先来了解一下相关知识：要实现框架中多窗体的不同元素的访问，则必须使用window对象中的Frames属性。Frames属性同样也是一个数组，它在父框架集中为每一个子框架设有一项。通过下标实现不同框架的访问:
parent.frames[Index1].docuement.forms[index2]
通过parent.frames.length确定窗口中窗体的数目。除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访：
parent.framesName.document.getElementById()
OK，这么点资料就够用了，我们来小试一把。首先创建一个theFather.html，其代码如下：

<html>

<head>

<title>frame get Value test</title>

</head>

<iframe frameborder="1" height="78" marginheight="0" marginwidth="0" scrolling="no" width="100%" src="theSon.html"></iframe>

<h3>这是theFather的文本框</h3>

<input type="text" name="txtFather" id="txtFather" />

</html>

接下来创建theSon.html，其代码如下：

<html>

<head>

<title>the son frame</title>

<script type="text/javascript">

//此方法用于向其父文本框类赋值

function setValue(){

//获得子类文本框中的值

var sonValue=document.getElementById("txtSon").value;

//弹出信息，此处仅用于测试

alert("theSon的值为："+sonValue);

//向父类文本框赋值

parent.document.getElementById("txtFather").value=sonValue;

}

</script>

</head>

<body>

<h3>这是theSon的文本框及按钮</h3>

<input type="text" name="txtSon" id="txtSon" />

<input type="button" name="btnSon" id="btnSon" value="提交" onclick="setValue();" />

</body<
span class="tag">>

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