7

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?

9
  • Please keep in mind that I have very limited experience with JavaScript... Commented Sep 21, 2011 at 1:44
  • You want to import another file and replace part of the page content? Commented Sep 21, 2011 at 1:45
  • 1
    I'm sorry but I don't think this is possible. This would be a complete security issue if this were possible. JavaScript is only for one page. You would have to use a server-side language because JavaScript is client side meaning it can't go to another page and do something to it.
    – Nathan
    Commented Sep 21, 2011 at 1:46
  • 2
    I'm pretty certain this is asked at least once a week in various different forms.
    – zzzzBov
    Commented Sep 21, 2011 at 1:46
  • 1
    stackoverflow.com/questions/3950620/…
    – zzzzBov
    Commented Sep 21, 2011 at 1:50

2 Answers 2

8

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 (e.g. 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.

3
  • Note that #1 will only work if you have access to the cookie (e.g. shared domain) Commented Sep 21, 2011 at 1:53
  • you forgot opening new windows (of the same domain) with window.open. Although it's often used to create popups, there are legitimate uses for window.open.
    – zzzzBov
    Commented Sep 21, 2011 at 1:53
  • Good comments Jason and zzzzBov. I've incorporated them both.
    – jfriend00
    Commented Sep 21, 2011 at 1:55
3

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';
};
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.