是否可以在一个文档中使用JavaScript来更改另一个文档中的HTML？

Question

For example:

function change() { document.getElementById('identification').href = "http://www.stackoverflow.com"; }

The associated HTML (the important bit)

<a href="#" id="identification">Stack Overflow</a>
<input type=button value="Change" onclick="change()" />

This will change the href in my tag to http://www.stackoverflow.com , but say I wanted to do this from a different HTML file? The JavaScript would be in the tag of the other file, but would edit the content of the first. Is this possible? If so, how?

Answer 1

Javascript lives only for the life of a particular page so you can't have code in one file modify another, as yet unloaded file.

Depending upon what you want the user experience to be, there are some options:

1. While on the first page, use some javascript to set a cookie and then when the second page loads, read that cookie and have the javascript in the second page adapt based on the cookie value. Cookies can be shared between pages on the same domain.
2. While on the first page, use some javascript to create a query parameter (those things after the ? in a URL that look like this ?show=true . When you load the second page, request that page by appending the ?show=true (or whatever you make up) to the end of the URL. When the second page loads, it can examine the query parameters on it's URL and decide how to modify itself. This is the simplest way of passing temporary arguments from one page to the next page.
3. Load the second page into an iframe (embedded into the first page) and when it's loads, your javascript can modify it (if it is served from the same domain as your main page).
4. Load the second page into your first page, actually inserting it into the original page either appending it or replacing some of your existing content. Then, the first page's javascript can modify the HTML from the second page once it has been inserted.
5. Open a new window with the new page in it. If it's on the same domain as you, then your javascript can reach into that new page and modify it.

Note: the browser tries to prevent page modifications when the two pages do not have the same origin (eg same domain). See a description of the same origin policy . So, if your question pertains to pages on different domains, then you will need to find a different way to solve your problem. Things like add-ons can sometimes get around the same-origin policy, but regular page javascript cannot for numerous security reasons.

Answer 2

Because I can't find a question that I feel matches this one enough to be closed as an exact duplicate, I'll post an answer:

Is it possible to use JavaScript in one document to change HTML in another?

Yes, assuming both windows are within the same security sandbox.

If so, how?

It's quite simple, you need to call the DOM functions from the context of the window you want to access.

a simple way to get a new window object is to call window.open

var newWin = window.open(newpage)

newWin is a window object, and therefor has a document object as well as all the other DOM elements that it may have loaded. Just like any other window, you'll need to wait for document.ready or window.onload if you're trying to interact with the elements being loaded on the page.

newWin.onload = function(){
  var ident = newWin.document.getElementById('identification');
  ident.href = 'http://stackoverflow.com';
};