Question

我正在尝试在提交表单时更改<iframe>背景，但我很难让它工作。

这是我的示例HTML代码。我无法摆弄它，因为<iframe>会来自另一个网址，因为iframe的跨域限制根本不起作用。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("myframe").contentDocument.body.style.background = "red";
}
</script>
</head>
<body>

<form onsubmit="myFunction()" id="myframe" action="demo_form.asp" method="post" target="frame">
  <label>First name:<input type="text" name="fname"></label>
  <label>Last name:<input type="text" name="lname"></label>
  <input type="submit">
</form>
<iframe name="frame">

</body>
</html>

要进行实时演示，您可以转到here并将其替换为我的代码。

请帮助我，这应该很容易。我不是很熟悉JavaScript，因为你现在已经理解了。我试图在这段代码上使用纯JS而不是jQuery。最糟糕的是，JS代码在与表单无关时起作用，但只有一个简单的按钮onclick事件：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("myframe").contentDocument.body.style.background = "red";
}
</script>
</head>
<body>

<button onclick="myFunction()">hei</button>
<iframe id="myframe" src="demo_iframe.htm"></iframe>

</body>
</html>

（复制到上面的相同链接进行现场演示）

顺便说一句，请不要链接到w3fools.com，因为我通常不在W3Schools上，但它是我能找到的唯一可以修改我的代码的网站，并且存储了<iframe>个示例在同一个网址上。

Answer 1

myframe是表单的ID，而不是您的iframe。

您还试图在将新文档加载到框架中之前立即更改框架中文档的背景，这会丢弃具有更改背景的文档。

通过让服务器提交具有正确背景颜色的文档来响应表单提交来解决此问题。

Answer 2

如果其他人对我的问题感到疑惑而没有从已经说明的内容中获得任何帮助，我会发布我的最终代码供其他人查看。我必须做的是在<iframe> submit事件监听器中有一个<form>加载事件监听器。这将保证在更改CSS之前提交表单，与onclick上的<input type="submit">解决方案不同（可以在不使用鼠标的情况下提交<form>）。

<form onsubmit="iframebackground()" target="frame"></form>
<iframe name="frame" id="myframe">
<script>
function iframebackground() {
    document.getElementById("myframe").addEventListener("load", function(){
        this.contentDocument.body.style.background = red;
    });
}
</script>

表单提交</iframe>上的<iframe>背景更改

2 个答案: