2016-10-01 95 views
1

我想從另一個網頁調用一個網頁的javascript功能。假設我有一個函數myFunction(),它在A.html中定義,我想用B.html使用onclick屬性。如何在B.html中使用onclick撥打myFunction(),這樣可能會帶來A.html中的一些變化?如何使用html中的onclick屬性從另一個網頁調用一個網頁的javascript功能?

這裏的例子...

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> 
+0

是不可能創建一個名爲'在它的功能script.js'文件並導入它在兩個網頁? –

+0

你不能那樣做。甚至不要嘗試 –

+0

取決於它們之間的關係,如果它們位於同一個域中,並且其中一個嵌入在iframe中,則只需通過iframe的作用域即iframe.contentWindow.myFunction(if這是全球性的)。否則,您必須在每個窗口上實施窗口消息,並根據收到的消息執行該功能。 –

回答

2

什麼你想要做的是不可能的,因爲HTML頁面不作「本地」功能可用於其他網頁。

解決您的問題: 創建一個名爲script.js的文件。 將您的javascript功能放入其中,而不使用<script>標籤。

在這兩個網頁的<head>標籤,添加<script src="path/to/script.js"></script>

+0

謝謝。這個答案對我來說很簡單。 –

0

您將需要創建一個單獨的文件,如myscript.js和使用script標籤的網頁鏈接。

1

首先,我必須在窗口之間建立一個鏈接,就像你用window.open()打開頁面一樣。

窗口對象是JavaScript中的全局對象。如果兩個窗口(頁面)都有名稱,則可以調用另一個窗口方法。要從子窗口調用父窗口函數,我們調用window.opener函數。探索此區域的更多選項。

您不能從任何頁面隨意調用任何頁面的JavaScript功能,例如您無法在facebook.com中調用google.com的javascript功能,除非未使用window.open()從google.com頁面打開facebook頁面。

+0

如果它適合您的情況,請嘗試此操作。 http://stackoverflow.com/questions/25098573/how-to-call-parent-window-function-from-child-window-jquery –

1
  1. 您可以使用localStorage的(在同一個域的頁面訪問同一存儲)。將消息/指令保存到存儲器,兩頁都將通過定時器進行檢查。

  2. 或者使用方法的postMessagehttps://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)如果網頁B是由頁面打開A.

一些有趣的解決方案在計算器: Javascript communication between browser tabs/windows

的解決方案示例:

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> 
0

從你想達到什麼樣的外觀上來看,它聽起來像是你將不得不存儲這個定義從「A「值」 HTML'以書面文件或SQL數據庫的某種形式存在......然後在「B.html」中填充某種默認值,除非在存儲的文件/ SQL數據庫中指定。這可以通過Tom Nijs指出的HTML和Javascript來實現,但不能。您可能可以通過使用PHP或Java來獲得結果。

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

0

頁面B可以調用頁面A上的任何函數(如果需要的函數在窗口對象中)。 這不安全,但它的工作原理。

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')"> 
相關問題