How to have one page effect another using javascript

Question

I'm trying to create a page that can be influenced by another page if that makes sense (one page control what happens on the other page...).

I have two HTML pages and one js file named "Controll.js" and in that there is a function to change "Indiv" in the Index.html. This event is triggered by the button on the Controll.html page. My code is below: (the js is the referenced Controll.js file)

 function myFunction() {
    document.getElementById("Indiv").innerHTML = "Hi!!";
 }

<!-- Controll.html -->

<DOCTYPE! html>
<head>
</head>
<body>


    <button type="button" onclick="myFunction()">write hi</button>

</body>
<script src="Controll.js"></script>
</html>
<!-- END Controll.html -->

<!-- Index.html -->

<DOCTYPE! html>
<head>
  <script src="Controll.js"></script>
</head>
<body>


  <p id="Indiv"></p>

</body>

</html>
<!-- END Index.html -->

I want to have one site be able to change a div on another site — Sonder Systems, Jul 12 '18 at 05:54
Possible duplicate of [How can I send an event from child window to its parent window](https://stackoverflow.com/questions/13334204/how-can-i-send-an-event-from-child-window-to-its-parent-window) — Tibrogargan, Jul 12 '18 at 05:55
If you want to change this for ONE user, session or localStorage can be used, but it sounded like you want this to be a permanent change — mplungjan, Jul 12 '18 at 05:58
Browsers are very resistant to changing anything delivered from a different domain. It's a security issue. Pretty much the only way you can make changes across pages if is they were opened in windows belonging to the same browser and they are from the same domain. Anything other way of doing this (and there are a number) are not really javascript — Tibrogargan, Jul 12 '18 at 05:58
Would you be able to provide a specific example, im VERY new to js — Sonder Systems, Jul 12 '18 at 05:58
This is the perfect use case for Shared Workers. This will create a threaded script running in all the tabs of the same domain (provided you fetch the worker) : https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker — Seblor, Jul 12 '18 at 05:58
@SonderSystems Please let us know the step by step experience of the user and if they are changing server on the way — mplungjan, Jul 12 '18 at 05:59
I keep reciving a error saying "Uncaught TypeError: Cannot set property 'innerHTML' of null at myFunction (Controll.js:2) at HTMLButtonElement.onclick (Controll.html:7)" — Sonder Systems, Jul 12 '18 at 06:00
@mplungjan ah if it is cross browser, a server will be needed, then — Seblor, Jul 12 '18 at 06:00
You do not have an element with Indiv in the page that runs the script. It is all a bit of wishful thinking at the moment — mplungjan, Jul 12 '18 at 06:02
it is not possible in the static websites pag.. if your are using php / asp.net or java it is possible and very easy.. — Ask Xah, Jul 12 '18 at 06:24
`window.postMessage()` https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage — Lain, Jul 12 '18 at 06:56
_“I want to have one site be able to change a div on another site”_ - even though you might not be able to see it, due to general lack of basic knowledge, this is still very very vague. First of all you have to realize, that there is no “connection” between those pages per se; if you want any, you have to facilitate it. So we would need to know, whether you would want to display those two pages “in parallel”, in a kind of frameset; or if you want to click something on the first page, and then “get to” the second page based on that (like if you had clicked a normal link or form submit button.) — CBroe, Jul 12 '18 at 08:27

score 0 · Answer 1 · answered Jul 12 '18 at 06:15

The Javascript code you write in one page is gone once you navigate to another, what stays permanently is "localStorage", what you need to do is save the string in the local storage from the controller then fetch it from the index.

this is how your function should look like in Controll.js:

 function myFunction() {
    localStorage.setItem('message','hi');
 }

then trigger it onclick just like how you did it in Controll.html

<!-- Controll.html -->

<DOCTYPE! html>
<head>
</head>
<body>


    <button type="button" onclick="myFunction()">write hi</button>

</body>
<script src="Controll.js"></script>
</html>
<!-- END Controll.html -->

in index.html we need to check if the controll page sent us anything, and if it did it stays permanently by default, if you want to send it just once then you can delete it after fetching it.

index.js

var Indiv = document.getElementById('Indiv');
function fetchMessage(){
 //check if the message exists
 if(localStorage.getItem('message'){
  Indiv.innerHTML = localStorage.getItem('message');
  //optional, empty the localStorage after getting the message
  localStorage.removeItem('message');
 }
}

Alternatively, you can use cookies as well, but localStorage is more reliable — Lorddirt, Jul 12 '18 at 07:08

How to have one page effect another using javascript

1 Answers1