CODEWITHSUNDEEP
javascripthtml
Syed Aun
Syed Aun

Reputation: 89

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

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>

Upvotes: 1

Views: 15713

Answers (6)

Luka Salun
Luka Salun

Reputation: 81

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')">

Upvotes: 0

Luka Salun
Luka Salun

Reputation: 81

  1. 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.

  2. 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>

Upvotes: 1

Kārlis K.
Kārlis K.

Reputation: 72

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.

Upvotes: 0

Aniruddha Das
Aniruddha Das

Reputation: 21688

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().

Upvotes: 1

Baker
Baker

Reputation: 161

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

Upvotes: 0

Tom Nijs
Tom Nijs

Reputation: 3950

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>

Upvotes: 3

Related Questions