Javascript:根据ID更新元素

Javascript: Updating an element by ID?

本文关键字：更新 元素 ID 根据 Javascript      更新时间：2023-09-26

我试图通过ID获得一个元素并更新它，但我似乎有麻烦，因为我是相当新的javascript。这是我的表单:

<div class="formRow billingForm">
    <div class="formLabel">First Name</div>
    <div class="formField">
      <input type="text" class="formTextField firstName" value="" name="firstName" maxlength="35" id="firstName">
    </div>
    <div class="formExtraInfo formExtraInfoTall">Enter your name.</div>
  </div>

我试图通过执行以下"

"来更新"firstname"的值
document.getElementById("firstName").value = "UPDATED";

，它的工作原理，但当我尝试它在我的实际网站我得到null元素，即使它在那里。整个表单都在iframe内。

您不能使用脚本从外部访问iframe的内容——这会引入XSS漏洞。您需要以某种方式将该脚本加载到iframe中，或者完全避免使用iframe。请查看这一页关于同源策略的信息，了解为什么它不起作用。

try

      iframe =  getElementByTagName('iframe').contentWindow.document
      iframe.getElementById('firstName').value = 'UPDATED'

当您调用iframe时，您也调用了另一个HTML页面。您必须在这个iframe的目标页面内编写脚本。

确保父页面和iframe页面的域名URL是相同的然后它是可能的。这是访问表单的父节点的JS。

var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
innerDoc.getElementById("firstName").value = "UPDATED";

希望有帮助:)

如果form在iframe中，并且您正在从iframe的父元素更新form元素的值，请使用以下命令:

将值赋给表单名，如下所示:

<iframe src="formPage.html" onload="loaded()" name="myFrame" />

并将id赋给表单元素，例如"myForm"

访问iframe内部的form元素:

myFrame.document.getElementById("myForm").firstName.value = 'UPDATED';

还要确保脚本在iframe加载后运行。您的iframe标签有一个onload事件，您可以使用它来确定何时加载框架内的页面。

相关文章：