Fatal编程技术网
  • javascript/
  • Javascript <；iframe>；提交表格时的背景更改

Javascript <；iframe>；提交表格时的背景更改

javascript html iframe

Javascript <；iframe>；提交表格时的背景更改,javascript,html,iframe,Javascript,Html,Iframe,我试图在提交表单时更改背景，但我很难让它正常工作 这是我的示例HTML代码。我不能摆弄它，因为将来自另一个URL，而且由于iframe的跨源限制根本不起作用 <!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("myframe").contentDocument.body.style.background = "red"

我试图在提交表单时更改
背景，但我很难让它正常工作

这是我的示例HTML代码。我不能摆弄它，因为
将来自另一个URL，而且由于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>


函数myFunction（）{
document.getElementById（“myframe”）.contentDocument.body.style.background=“红色”；
}
名字：
姓氏：
要进行现场演示，您可以使用我的代码替换它

请帮帮我，这应该很容易。我对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>


函数myFunction（）{
document.getElementById（“myframe”）.contentDocument.body.style.background=“红色”；
}
嗨
（复制到与上面相同的链接以进行演示）

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

myframe
是你的表单的ID，而不是你的iframe

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

方法是让服务器提交一份背景颜色正确的文档，作为对表单提交的回应。

如果其他人想知道我的问题，而没有从前面的内容中得到任何帮助，我将发布我的最终代码，供其他人查看。我要做的是在
提交事件监听器中有一个
加载事件监听器。这将保证在更改CSS之前提交表单，这与
上的
onclick
解决方案不同（可以不用鼠标提交
）


函数iframebackground（）{
document.getElementById（“myframe”）.addEventListener（“加载”，函数（）{
this.contentDocument.body.style.background=红色；
});
}
如果两个域都位于不同的域中，则无法从父页面访问iframe内部内容。
源和表单URL位于同一域中，如上所述。@AmrElGarhy-因为在我发现其他问题之前，这看起来像是一个“您输入了错误”的问题。这不是一个“真正的”答案。关闭社区维基会阻止人们将评论复制到答案中。很抱歉，这与我的真实代码不同，是一个打字错误，但仍然不起作用。但现在它会闪烁红色。 
<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>