如何使用html中的onclick屬性從另一個網頁調用一個網頁的javascript函數？

Question

我想從另一個網頁調用一個網頁的javascript函數。 假設我有一個在A.html定義的函數myFunction()並且我想使用onclick屬性在B.html使用它。 我如何在B.html使用onclick調用myFunction() ，以便它可以給A.html帶來一些變化？

這是示例...

A.html包括

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

B.html有

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

Answer 1

您嘗試做的事情是不可能的，因為 HTML 頁面不會使“本地”功能可用於其他網頁。

解決您的問題：創建一個名為script.js的文件。 將您的 javascript 函數放在其中，沒有<script>標簽。

在兩個網頁的<head>標簽中，添加<script src="path/to/script.js"></script>

Answer 2

首先，窗口之間必須有一個鏈接，就像您使用window.open()打開頁面一樣。

Window 對象是 JavaScript 中的全局對象。 如果兩個窗口（頁面）都有名稱，您可以從另一個調用一個窗口方法。 要從子窗口調用父窗口函數，我們調用window.opener函數。 探索該領域的更多選擇。

您不能從任何頁面隨機調用任何頁面 javascript 函數，就像您不能在 facebook.com 中調用 google.com 的 javascript 函數一樣，除非未使用window.open()從 google.com 頁面打開 facebook 頁面。

Answer 3

您可以使用localStorage （同一域上的頁面可以訪問相同的存儲）。 將消息/指令保存到存儲中，兩個頁面都將通過計時器進行檢查。
或者，如果頁面 B 被頁面 A 打開，則使用方法postMessage ( https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage )。

stackoverflow 上有一些有趣的解決方案：瀏覽器選項卡/窗口之間的 Javascript 通信

解決方案示例：

一個.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>

Answer 4

您需要創建一個單獨的文件，例如 myscript.js 並使用script標記將其鏈接到頁面中。

Answer 5

從您想要實現的目標來看，聽起來您必須以某種形式的書面文件或 SQL 數據庫的形式存儲來自 'A.html' 的這個定義的“值”......然后將值放入“B.html”填充某種默認值，除非在存儲文件/SQL 數據庫中指定。 這可以實現，但不能像Tom Nijs指出的那樣僅使用 HTML 和 Javascript。 您可能可以通過使用 PHP 或 Java 來實現結果。

...或者忽略我所說的，只擁有一個預定義值的列表/數組。

Answer 6

頁面 B 可以調用頁面 A 上的任何函數。（如果需要的函數在 window 對象中）。 它不安全，但它有效。

頁面 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>

頁面 B：

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

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

如何使用html中的onclick屬性從另一個網頁調用一個網頁的javascript函數？

問題描述

6 個解決方案

解決方案1
3 已采納 2016-10-01 19:42:24

解決方案2
1 2016-10-01 19:50:07

解決方案3
1 2016-10-01 19:51:49

解決方案4
0 2016-10-01 19:42:50

解決方案5
0 2016-10-01 20:04:36

解決方案6
0 2016-10-01 20:39:43

如何使用html中的onclick屬性從另一個網頁調用一個網頁的javascript函數？

問題描述

6 個解決方案

解決方案1 3 已采納 2016-10-01 19:42:24

解決方案2 1 2016-10-01 19:50:07

解決方案3 1 2016-10-01 19:51:49

解決方案4 0 2016-10-01 19:42:50

解決方案5 0 2016-10-01 20:04:36

解決方案6 0 2016-10-01 20:39:43

解決方案1
3 已采納 2016-10-01 19:42:24

解決方案2
1 2016-10-01 19:50:07

解決方案3
1 2016-10-01 19:51:49

解決方案4
0 2016-10-01 19:42:50

解決方案5
0 2016-10-01 20:04:36

解決方案6
0 2016-10-01 20:39:43