高分求教：关于iframe和父窗口之间传递数据的问题
问题是这样，下面的代码是我的主页面，主页面里面有个搜索框，然后就是一个iframe
我现在想实现如下两个功能：
1.把主页面中的搜索框中的数据传递到iframe里面
2.然后返回的结果，从iframe中返回到主页面当中（或者在主页面当中再建立一个iframe，返回给它也行）
我写的代码如下，下面代码中“XXXXX”应该是要写的东西，本人新手，搞不定阿
PS:大侠们最好给出具体代码，小弟才疏学浅能力有限！
<html>
<head><title>wlw.com</title></head>
<body>
<form action = "#" onsubmit = "XXXXXX" style = "display: inline-block; white-space: nowrap;" id = "searchForm">
<table cellspacing = "0" cellpadding = "0">
<tr>
<td>
<input id = "strInput" type = "text" style = "width: 400px; height: 30px;">
</td>
<td>
<button type = "submit" id = "searchButton" style = "width:90px; height: 30px;"></button>
</td>
</tr>
</table>
</form>
<hr>
<iframe name="inside" src="index-clear.html" cols="30%,*" height=600 width=1100 align=right scrolling=no frameborder=yes>
</iframe>
</body>
</html>
[解决办法]
- HTML code
<html><head><title>wlw.com</title><script type="text/javascript">function XXXXXX(){ document.inside.window.document.body.innerHTML=document.getElementById("strInput").value; document.inside.window.onresize=function(){parent.window.document.getElementById("strInput").value="return value"}; document.inside.window.resizeTo(1100,500);}</script></head><body><form action = "#" onsubmit = "XXXXXX();return false;" style = "display: inline-block; white-space: nowrap;" id = "searchForm"> <table cellspacing = "0" cellpadding = "0"> <tr> <td> <input id = "strInput" type = "text" style = "width: 400px; height: 30px;"> </td> <td> <button type = "submit" id = "searchButton" style = "width:90px; height: 30px;"></button> </td> </tr> </table></form><hr><iframe name="inside" src="photo3.aspx" cols="30%,*" height=600 width=1100 align=right scrolling=no frameborder=yes></iframe></body></html>
[解决办法]
main.html
- HTML code
<html> <head> <script type="text/javascript"> function getMsg(){ var el = document.getElementById("msg"); var txt = document.frames['inside'].document.getElementById('txts'); txt.value = el.value; } </script> </head> <body> <input type="text" id="msg" /> <input type="button" onclick="getMsg()" value="button" /><br/> <iframe name="inside" id="inside" src="1.html" cols="30%,*" height=600 width=1100 align=right scrolling=no frameborder=yes> </iframe> </body></html>
[解决办法]
- HTML code
<html><head><title>wlw.com</title></head><script type="text/javascript">var theFormSubmit=function(){ searchForm.action = "index-clear.html?s=" + document.getElementById("strInput").value; searchForm.submit();}</script><body><form method="get" target="inside" style = "display: inline-block; white-space: nowrap;" id = "searchForm"> <table cellspacing = "0" cellpadding = "0"> <tr> <td> <input id = "strInput" type = "text" style = "width: 400px; height: 30px;"> </td> <td> <button type = "submit" id = "searchButton" style = "width:90px; height: 30px;" onclick="theFormSubmit()"></button> </td> </tr> </table> 结果:<input id="result" type="text" /></form><hr><iframe name="inside" src="dex-clear.html" cols="30%,*" height=600 width=1100 align=right scrolling=no frameborder=yes></iframe></body></html>
[解决办法]
index.html
- JScript code
<html><head><title>wlw.com</title><script> String.prototype.trim = function() { return this.replace( /^\s+/g, "" ).replace( /\s+$/g, "" ); } function set_iframe(){ var strinp=document.getElementById("strInput"); var value = strinp.value.trim(); if(value == ""){ return false }else{ inside.document.getElementById("ifr_text").value = ("搜索框输入:"+value); alert("iframe内的值已经设置为"); return false; } }</script></head><body><form action = "#" onsubmit = "return set_iframe();" style = "display: inline-block; white-space: nowrap;" id = "searchForm"> <table cellspacing = "0" cellpadding = "0"> <tr> <td> <input id = "strInput" type = "text" style = "width: 400px; height: 30px;"> </td> <td> <button type = "submit" id = "searchButton" style = "width:90px; height: 30px;"></button> </td> </tr> </table></form><hr><iframe name="inside" src="index-clear.html" cols="30%,*" height=600 width=1100 align=right scrolling=no frameborder=yes></iframe></body></html>