1

Consider an HTML page named page1.html with the following simple structure:

<html>
<title>Page1</title>
<body>
  <h1>Hello</h1>
</body>
</html>

Is it possible to change<h1> text on page1.html with JavaScript from page2.html?

If it’s possible, how can one achieve this?

Milad
  • 19
  • 1
  • 5
  • Do you show page2.html? – Poul Bak Aug 25 '18 at 08:17
  • Should the change be persistent (i.e. like editing Wikipedia, after you do the action on `page2.html` then the `h1` on `page1.html` will be set to the new value for all that load the page after that point), or does it need to be dynamic and only to the person that currently has the page open (i.e. like Facebook chat, where you send a message to one user, and it appears on the other user's screen)? – Toastrackenigma Aug 25 '18 at 08:26
  • actually I didn't provide any code for page2.html, but I was Curious that, is the problem feasible? and then how it could be implemented? – Milad Aug 25 '18 at 08:57
  • I do not want to make changes persistent but just change the needed value for current load. – Milad Aug 25 '18 at 08:59
  • What exactly are you trying to achieve here? – connexo Aug 25 '18 at 09:33
  • actually, i have an alarm system which generates alarms in a web page while i do not have access to the source code of the program, but i want to acknowledge those alarms by scripting on another page so the acknowledgement process can be done automatically by my script – Milad Aug 25 '18 at 10:09
  • Possible duplicate of [Is it possible to use JavaScript in one document to change HTML in another?](https://stackoverflow.com/questions/7493689/is-it-possible-to-use-javascript-in-one-document-to-change-html-in-another) – Tzar Aug 25 '18 at 10:20

3 Answers3

4

Assuming you serve both your HTMLS from the same origin (e.g. if you had two facebook tabs open), you could solve this by using the 'storage' event (Local Storage is shared between tabs), like this:

HTML1:

<script>
    localStorage.setItem('message', JSON.stringify({ 'myContent': 'i like pizza' }));`
     localStorage.removeItem('message');
</script>

HTML2

<script>
    $(window).on('storage', e => {
        var message = JSON.parse(e.originalEvent.newValue);
        $('#myH1').text(message.myContent);
    });
</script>
iuliu.net
  • 6,666
  • 6
  • 46
  • 69
  • How is `storage` an `event`? – connexo Aug 25 '18 at 09:33
  • thanks to iuliu.net for the answer, but as i said, i do not aim to make any modification in page1.html – Milad Aug 25 '18 at 09:37
  • Yes. Using this example, the changes will not be persisted, they'll be there just for the current load. (don't be fooled by seeing localStorage here, it's nothing but a communication mechanism between the two pages) – iuliu.net Aug 25 '18 at 09:42
2

I think the short answer you are looking for is "No".

You cannot modify one static page using another static page without a server between them.

Some solutions as mentioned from other pals can work, like using a local storage or stuffing a cookie -Only if they will run on the same browser-, but it will definitely require some changes in page1.html which is not you're looking for.

Ahmed Hammad
  • 2,798
  • 4
  • 18
  • 35
0

Since you commented that you don’t need it to be persistent, what you want is to create an illusion that you’re changing <h1> text on page1.html with JavaScript from page2.html.

You need two things:

  1. First, to change the actual text in <h1> use .innerText property with replace() method.

  2. To change the URL in the address bar from /page2.html to /page1.html use the History API with history.pushState() and history.replaceState() methods.

Tzar
  • 5,132
  • 4
  • 23
  • 57
  • Btw, I’m still not entirely sure what you actually want to achieve. – Tzar Aug 25 '18 at 10:00
  • can I perform number 1 in page2.html? – Milad Aug 25 '18 at 10:02
  • Since `page2.html` is virtual, then the answer is yes. – Tzar Aug 25 '18 at 10:04
  • actually, i have an alarm system which generates alarms in a web page while i do not have access to the source code of the program, but i want to acknowledge those alarms by scripting on another page so the acknowledgement process can be done automatically by my script. – Milad Aug 25 '18 at 10:05
  • If I understood correctly, what you want can’t be done. – Tzar Aug 25 '18 at 10:13
  • page2.html is not virtual, it is the only html file which i want to perform my script in it, and I do not aim to perform any modifications in page1.html code. – Milad Aug 25 '18 at 10:13
  • So you want to read alarm status from the original page and update the status on yours? – Tzar Aug 25 '18 at 10:16
  • yes and this update should change a value of an HTML element (as instance: a checkbox) on page1 – Milad Aug 25 '18 at 10:19