Question

我尝试使用JavaScript更新网页上的iframe，但它无效。这个例子看起来非常简单，但是一旦我点击按钮，页面就没有用新页面加载iframe。我在本地做这件事。

<html>
    <body>
    <script>
    function changeIframeSrc() {
        document.getElementById('myFrame').src = "test2.html";
    }
    </script>
    <form>
    <button onclick="changeIframeSrc()">Click here</button>
    <iframe id="myFrame" src="test1.html"></iframe>
    </form>
    </body>
    </html>

Answer 1

只需删除表单标记

即可

<html>
<body>
<script>
function changeIframeSrc() {
    document.getElementById('myFrame').src = "test2.html";
}
</script>
<button onclick="changeIframeSrc()">Click here</button>
<iframe id="myFrame" src="test1.html"></iframe>
</body>
</html>

Answer 2

脚本加载新的<iframe>。问题是<form> 也提交（如果浏览器支持隐式表单提交），然后使用原始<iframe>重新加载页面。

一个简单的解决方案是删除<form>元素。如果没有<form>元素，则无法提交表单：

<!--form-->
 <button onclick="changeIframeSrc()">Click here</button>
 <iframe id="myFrame" src="test1.html"></iframe>
<!--/form-->

另一种方法是通过从<button>处理程序返回false来阻止onclick的默认操作：

<form>
 <button onclick="changeIframeSrc(); return false;">Click here</button>
 <iframe id="myFrame" src="test1.html"></iframe>
</form>

但是，这些解决方案存在问题。如果浏览器没有执行脚本，或者脚本以某种意料之外的方式失败，则会给用户留下一个死按钮。理想情况下，当脚本不运行时，按钮应以有用的方式提交表单。例如：

<form>
 <button name=frame value=2 onclick="changeIframeSrc(); return false;">Click here</button>
 <iframe id="myFrame" src="test1.html"></iframe>
</form>

添加一些输出表单的服务器端代码，但如果使用表单数据src="test2.html"请求页面，则<iframe>作为默认frame=2来源。

使用JavaScript动态更新iframe src属性

2 个答案: