JavaScript 向 iframe 内表单提交数据的实现方案
本文介绍如何在父页面通过 JavaScript 向 iframe 内的表单传递数据并提交。核心步骤包括获取 iframe 的 contentWindow 对象,访问其内部 DOM 元素为隐藏字段赋值,最后触发 iframe 内表单的 submit 方法。文中提供了完整的父页面与子页面代码示例,并在 IE 和 Firefox 浏览器中验证通过。
JavaScript 向 iframe 表单传值方案
本文详细介绍一种利用 JavaScript 向 iframe 内部表单传递数据并提交的方法,供开发者参考。
关键在于先获取 iframe 元素的 contentWindow 属性,以此作为访问内部文档对象的入口。该方案在 IE 和 Firefox 浏览器中测试均能正常运行。
具体实现逻辑如下所示:
父页面 a.jsp 的核心代码:
<script language="JavaScript">
function ExecuteSql()
{
var FormObj = document.getElementById("ResultShowFrame").contentWindow;
var SqlStr=document.getElementById("sqlcontent").value;
if (SqlStr !="")
{
FormObj.document.getElementById("Sql").value=SqlStr;
FormObj.document.getElementById("Result").value='Submit';
FormObj.document.ExecuteForm.submit();
}
}
</script>
<form name="dbcompress" action="?Action=CompressDate" method="post">
<textarea name="sqlcontent" rows="3" wrap="OFF" style="width:100%;" id="sqlcontent"></textarea>
<input name="Submit" type="button" onClick="ExecuteSql();" class="Anbut2" value=" 执 行 ">
</form>
<iframe id="ResultShowFrame" scrolling="yes" src="b.asp" style="width:100%;height:420;" frameborder=1></iframe>
嵌入的 iframe 页面 b.jsp 的相关代码:
<form name="ExecuteForm" method="post" action="">
<input type="hidden" name="Sql" id="Sql">
<input type="hidden" name="Result" id="Result">
</form>
如需了解更多 JavaScript 技术细节,可参考本站专题:《JavaScript表单(form)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》。
希望上述内容能对您的 JavaScript 编程工作提供实际帮助。
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗?let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解:基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13
