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>
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.jswith your function in it and import it on both pages? – Tom Nijs Commented Oct 1, 2016 at 19:39 - You can't do that. Do not even try – Narek-T Commented Oct 1, 2016 at 19:40
-
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 Commented Oct 1, 2016 at 19:42 - Ok. But sorry I am not aware of 'script.js' , as its my first that I started javascript. – Syed Aun Commented Oct 1, 2016 at 19:45
- If one of the pages is an iframe, you can call a function in the iframe from the parent window or vice-versa. – Anderson Green Commented May 21, 2022 at 2:11
6 Answers
Reset to default 3What 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>
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. in facebook. until unless facebook page is not opened from google. page using window.open().
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/en-US/docs/Web/API/Window/postMessage) if page B is opened by page A.
There are some interesting solutions on stackoverflow: Javascript munication 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>
You would need to create a separate file such as myscript.js and link it in the the page using the script tag.
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.
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')">