How to call the javascript function of one web page from another web page using onclick attribute in html?

Question

I want to call the javascript function of one web page from another web page. Suppose I have a function myFunction() that is defined in A.html and I want to use it in B.html using onclick attribute. How would I call myFunction() using onclick in B.html, so that it could bring some change in A.html?

Here is the example...

A.html includes

<script>
function myFunction() {
    document.getElementById("my_contents").style.display="block";
}
</script>

where B.html have

<a href="Contents.html#entertainment" target="ccc" onclick="myFunction()">
<h4>Entertainment</h4></a>

Is it impossible to create a file called `script.js` with your function in it and import it on both pages? — Tom Nijs, Oct 01 '16 at 19:39
depends on their relation to each other, if they are on the same domain and one is embed in an iframe, its just a matter of accessing it through the iframe's scope, ie `iframe.contentWindow.myFunction` (if it's global). Otherwise you have implement window messaging on each one, and execute the function based on a received message — Patrick Evans, Oct 01 '16 at 19:42
Ok. But sorry I am not aware of 'script.js' , as its my first that I started javascript. — Syed Aun, Oct 01 '16 at 19:45
If one of the pages is an iframe, you can [call a function in the iframe](https://stackoverflow.com/questions/1600488/calling-javascript-function-in-iframe) from the parent window or [vice-versa](https://stackoverflow.com/questions/2161388/calling-a-parent-window-function-from-an-iframe). — Anderson Green, May 21 '22 at 02:11

score 3 · Accepted Answer · answered Oct 01 '16 at 19:42

3

What you're trying to do is impossible because HTML pages don't make "local" functions available to other webpages.

To solve your issue: Create a file called script.js. Place your javascript function inside it without the <script> tags.

In the <head> tag of both your web pages, add <script src="path/to/script.js"></script>

answered Oct 01 '16 at 19:42

Tom Nijs

3,835
3
22
40

Thanks.This answer is easy for me. – Syed Aun Oct 01 '16 at 19:55
It actually isn't impossible: there are several ways to [send messages between browser tabs](https://stackoverflow.com/questions/28230845/communication-between-tabs-or-windows) on the client-side. – Anderson Green Jan 26 '21 at 20:45

score 1 · Answer 2 · answered Oct 01 '16 at 19:50

First there must me a link between the window like you opened the pages with window.open().

Window object is the global object in JavaScript. if the both the window (page) have name you can call one window method from another. To call the parent window function from the child window, we call window.opener function. Explore more option on this area.

You cannot randomly call any page javascript function from any page like you cannot call javascript function of google.com in facebook.com until unless facebook page is not opened from google.com page using window.open().

Try this if it fits your situation. http://stackoverflow.com/questions/25098573/how-to-call-parent-window-function-from-child-window-jquery — Aniruddha Das, Oct 01 '16 at 19:54

score 1 · Answer 3 · edited May 23 '17 at 11:46

You can use localStorage (pages on the same domain have access to the same storage). Save messages/instructions to the storage and both pages will check it by timer.
Or use method postMessage (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) if page B is opened by page A.

There are some interesting solutions on stackoverflow: Javascript communication between browser tabs/windows

Example of solution:

A.html

<script>
setInterval(function(){
  var isNeedCall = localStorage.getItem('isNeedCall');

  if(isNeedCall == 'yes'){
    myFunction();
    localStorage.setItem('isNeedCall', 'no');
  }
}, 500);

function myFunction() {
  document.getElementById("my_contents").style.display="block";
}
</script>

B.html

<script>
function myFunction() {
  localStorage.setItem('isNeedCall', 'yes');
}
</script>

<a href="Contents.html#entertainment" target="ccc" onclick="myFunction()">
<h4>Entertainment</h4></a>

score 0 · Answer 4 · answered Oct 01 '16 at 19:42

0

You would need to create a separate file such as myscript.js and link it in the the page using the script tag.

answered Oct 01 '16 at 19:42

Baker

161
1
1
13

score 0 · Answer 5 · edited May 23 '17 at 12:34

From the looks of what you're trying to achieve, it sounds like you would have to store this defined "value" from 'A.html' in some form of a written file or an SQL database... then have the value in "B.html" filled with some sort of default value, unless specified in the stored file / SQL database. This can be achieved, but not with just HTML and Javascript as pointed out by Tom Nijs. You could probably achieve the result with usage of PHP or Java.

... or ignore what I said and just have a list/array of pre-defined values.

score 0 · Answer 6 · answered Oct 01 '16 at 20:39

Page B can call any function on page A. (If needed function is in window object). It is not secure but it works.

Page A:

<script>
  var callFunction;

  setInterval(function(){
    callFunction = localStorage.getItem('callFunction');

    if(callFunction && (window[callFunction] instanceof Function)){
      window[callFunction]();
      localStorage.setItem('callFunction', '');
    }
  }, 500);

  function myFunction() {
    document.getElementById("my_contents").style.display="block";
  }
</script>

Page B:

<script>
  function callFunction(functionName){
    localStorage.setItem('callFunction', functionName);
  }
</script>

<a href="/" onclick="callFunction('myFunction')">

How to call the javascript function of one web page from another web page using onclick attribute in html?

6 Answers6