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>
6 answers
solution1
3 ACCPTED 2016-10-01 19:42:24
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>
solution2
1 2016-10-01 19:50:07
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() .
solution3
1 2016-10-01 19:51:49
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>
solution4
0 2016-10-01 19:42:50
您需要创建一个单独的文件，例如 myscript.js 并使用script标记将其链接到页面中。
solution5
0 2016-10-01 20:04:36
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.
solution6
0 2016-10-01 20:39:43
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')">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.