jquery 控制frameset frame节点内容(在子窗口中把该窗口中的焦点处的text内容填
2014-01-11 18:22
381 查看
现在做这个项目中,有一项把:在子窗口中把该窗口中的焦点处的text内容填入其它子窗口的input内,也就是改写input的value值,这个费了4天时间,写下来记录一下心情吧
这个问题困扰了我4天,今天终于解决了,其实这并不难,只是自己学的太少,边学边用,又费时间又费精力,但真是长知识。
在left中访问right中的对象的jquery代码为:
$(window.parent.parent.frames["right"].document).find('#jh')这是找到了ID为jh的对象
$(window.parent.parent.frames["right"].document).find('#jh').val是指的是id对象的value值。
在left中访问right中的对象,并将left表格中的值传给righ中id为jh的文本框的代码为:
在left.php中的html代码为:
<td><a href="#" class="style1" onClick="MM_changeProp(this)" ><?php echo "$row[$i]"; ?></a></td>//点击触发MM_changeProp事件,并将此时,焦点处的text内容传给函数。
javascript部分是:
[javascript]
view plain
copy
print
?
<span style="color:#ff6666;"> function MM_changeProp(leftjhObj) {//带参数的函数,把焦点对象传给函数
leftjh=leftjhObj.innerText;//得到了焦点对象的text属性,也就是表格中的内容
rightjh=$(window.parent.frames["right"].document).find('#jh').val(leftjh);}//取得right框架中的id为jh的对象的val值,并改变为焦点的内容,这样就实现了把一个子框架的值传给另一个框架了,这里我一直把值以=的形式改写,所以才一直无法得正确传值。我用的是:</span>
[javascript]
view plain
copy
print
?
<pre name="code" class="javascript"><span style="color:#ff6666;">rightjh=$(window.parent.frames["right"].document).find('#jh').val()=<span style="font-family: Arial, Helvetica, sans-serif;">leftjh;这是错误的,要把值通过val()方法传给对象才行。</span></span></pre>
<pre></pre>
<p></p>
<p>主框架代码为:</p>
<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"></pre><pre name="code" class="html"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></pre><pre name="code" class="html"><title>jquery 控制frameset frame节点内容</title></head></pre><pre name="code" class="html"><frameset rows="*" cols="217,*"></pre><pre name="code" class="html"> <frame name="left" src="left1.php" noresize="noresize" /></pre><pre name="code" class="html"> <frame name="right" src="right1.php" /></frameset><noframes><body></body></noframes></html>
在右边的框架中,有一个form表单中有一个ID为jh的<input type="text" id="jh">
<form action="" method="POST"></pre><pre name="code" class="html"><table></pre><pre name="code" class="html"><tr></pre><pre name="code" class="html"><span style="white-space:pre"> </span><tb>
<span style="white-space:pre"> </span><input type="text" id="jh"/></tb>
<pre name="code" class="html"><span style="white-space:pre"> </span></tr></pre> <pre name="code" class="html"><span style="white-space:pre"> </span><tr></pre><pre name="code" class="html"><span style="white-space:pre"> </span><tb></pre><span style="white-space:pre"></span><input type="submit"/ value="提交><pre name="code" class="html"><span style="white-space:pre"> </span></tb></pre>
<pre></pre>
<pre name="code" class="html"><span style="white-space:pre"> </span></tr></pre><pre name="code" class="html"></table>
</form></pre><br>
<br>
<p></p>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
</pre>
这个问题困扰了我4天,今天终于解决了,其实这并不难,只是自己学的太少,边学边用,又费时间又费精力,但真是长知识。
在left中访问right中的对象的jquery代码为:
$(window.parent.parent.frames["right"].document).find('#jh')这是找到了ID为jh的对象
$(window.parent.parent.frames["right"].document).find('#jh').val是指的是id对象的value值。
在left中访问right中的对象,并将left表格中的值传给righ中id为jh的文本框的代码为:
在left.php中的html代码为:
<td><a href="#" class="style1" onClick="MM_changeProp(this)" ><?php echo "$row[$i]"; ?></a></td>//点击触发MM_changeProp事件,并将此时,焦点处的text内容传给函数。
javascript部分是:
[javascript]
view plain
copy
?
<span style="color:#ff6666;"> function MM_changeProp(leftjhObj) {//带参数的函数,把焦点对象传给函数
leftjh=leftjhObj.innerText;//得到了焦点对象的text属性,也就是表格中的内容
rightjh=$(window.parent.frames["right"].document).find('#jh').val(leftjh);}//取得right框架中的id为jh的对象的val值,并改变为焦点的内容,这样就实现了把一个子框架的值传给另一个框架了,这里我一直把值以=的形式改写,所以才一直无法得正确传值。我用的是:</span>
[javascript]
view plain
copy
?
<pre name="code" class="javascript"><span style="color:#ff6666;">rightjh=$(window.parent.frames["right"].document).find('#jh').val()=<span style="font-family: Arial, Helvetica, sans-serif;">leftjh;这是错误的,要把值通过val()方法传给对象才行。</span></span></pre>
<pre></pre>
<p></p>
<p>主框架代码为:</p>
<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"></pre><pre name="code" class="html"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></pre><pre name="code" class="html"><title>jquery 控制frameset frame节点内容</title></head></pre><pre name="code" class="html"><frameset rows="*" cols="217,*"></pre><pre name="code" class="html"> <frame name="left" src="left1.php" noresize="noresize" /></pre><pre name="code" class="html"> <frame name="right" src="right1.php" /></frameset><noframes><body></body></noframes></html>
在右边的框架中,有一个form表单中有一个ID为jh的<input type="text" id="jh">
<form action="" method="POST"></pre><pre name="code" class="html"><table></pre><pre name="code" class="html"><tr></pre><pre name="code" class="html"><span style="white-space:pre"> </span><tb>
<span style="white-space:pre"> </span><input type="text" id="jh"/></tb>
<pre name="code" class="html"><span style="white-space:pre"> </span></tr></pre> <pre name="code" class="html"><span style="white-space:pre"> </span><tr></pre><pre name="code" class="html"><span style="white-space:pre"> </span><tb></pre><span style="white-space:pre"></span><input type="submit"/ value="提交><pre name="code" class="html"><span style="white-space:pre"> </span></tb></pre>
<pre></pre>
<pre name="code" class="html"><span style="white-space:pre"> </span></tr></pre><pre name="code" class="html"></table>
</form></pre><br>
<br>
<p></p>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
</pre>
相关文章推荐
- jQuery中bind,live,delegate与one方法的用法及区别解析
- Jquery中常见问题
- jQuery常用插件
- 2013 年最好的 20 款免费 jQuery 插件
- jQuery插件开发全解析
- jquery的.html的使用
- jquery ui 1.9.2+ 引起连接target失效问题
- jquery操作select(取值,设置选中)
- jQuery Flash 是基于jQuery的WEB网页Flash嵌入式插件
- jquery.lazyload.js 延迟加载
- 使用jquery.knob.js生成圆形进度条,在IE7/IE8下提示对象不支持此属性或方法getContext()...
- jquery的after与insertAfter的区别
- JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
- jquery validate 自定义验证方法 日期验证
- jQuery的attr与prop
- 学习JQuery - 15
- JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
- jquery简介
- jquery.fn.extend与jquery.extend
- jquery $.fn $.fx是什么意思