Javascript：通过ID更新元素？

Question

I'm trying to get an element by ID and update it but I seem to be having trouble since I'm fairly new with javascript. This is my form:

<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>

I'm trying to update the value of the "firstname" by doing the following"

document.getElementById("firstName").value = "UPDATED";

and it works, but when I try it on my actual site I get null for element even though it's there. The whole form is inside an iframe though.

Answer 1

You can't access the content of the iframe with a script from outside of it -- that would introduce XSS vulnerabilities. You need to somehow load that script inside the iframe or avoid using an iframe at all. Take a look at this page on same origin policy for information on why that isn't working.

Answer 2

try

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

Answer 3

When you invoke an iframe you also invoke another HTML page. You have to do the scripting inside this iframe's target page.

Answer 4

Make sure the domain URL of the parent page and iframe page is the same then it is possible. This is the JS of the parent to access the form inside.

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

Hope it helps :)

Answer 5

If form is inside the iframe and you are updating the value of form element from the parent of iframe please use the below:

Assign the value to name of form like below:

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

and give the id to the form element for example "myForm"

Access the element of form inside the the iframe:

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

Also make sure your script runs after the iframe is loaded. Your iframe tag has an onload event that you can use to determine when the page within the frame is loaded.