javascript - 表单提交时 <iframe> 背景发生变化

标签 javascript html iframe

我正在尝试更改 <iframe>提交表单时的背景,但我很难让它发挥作用。

这是我的示例 HTML 代码。我无法摆弄它,因为 <iframe>将来自另一个 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>

要进行现场演示,您可以前往 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>存储在相同的 URL 上。

最佳答案

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

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

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

关于javascript - 表单提交时 &lt;iframe&gt; 背景发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27376144/

相关文章:

javascript - Identity Server 4,API 未经授权调用自省(introspection)端点

jquery - 可调整的 div 大小

javascript - 我如何使用 javascript 访问 Iframe #document

javascript - JQuery Onload 刷新 iframe

javascript - 防止按钮被按下两次

javascript - 如何使用 requireJs 加载包含多个模块的合并 JS 文件?

javascript - Dialogflow html/js 卡 json 值 v1

javascript - 清除现有的 iframe 内容

javascript - 如何在 JS 中使用 get 和 set 运算符制作对象的深拷贝

JavaScript:隐藏下拉列表中除一个之外的元素