2016-08-24 17 views
-1

は、私は次のようにページが定義されている:コールバック関数が定義されていないのはなぜですか?

<body> 
    <div id="container"> 
     <p> 
      <input id="myButton" type=button onclick=window.open('LandingPage.html'); value="Launch Search App"> 
     </p> 
    </div> 
    <script> 
     function cb(msg) { console.log(msg); } 
     myButton.addEventListener('click', cb); 
    </script> 
</body> 

このページでは、二次ページのコールバック関数を設定する責任があります。コールバック関数は、少なくともF12 Developer Toolsに従って設定されているようですが、PointerEventPrototypeが作成されています。コールバックを設定するaddEventListener()を含む行をコメントアウトすると、PointerEventPrototypeは存在しません。最初のページ上のボタンをクリックする

は、以下に示す、2ページ目を含む別のウィンドウを起動します:

<body> 
    <div id="container"> 
     <p> 
      <input type=button value="Save" onclick="click_function()"> 
     </p> 
    </div> 
    <script> 
     function click_function() { 
      var message = "Save button clicked!"; 

      console.log(message); 
      cb(message); 
     } 
    </script> 
</body> 

2ページ目は、最初のページにコールバック関数の設定に対応するために意図されて保存]ボタンが含まれています。保存ボタンをクリックすると、「保存ボタンがクリックされました!」コンソールに出力されますが、次の行cb(message)は、cbが定義されていないというエラーをスローします。どのようにこれを未定義にすることができますか?別の構文を使用してコールバック関数を呼び出す必要がありますか?

+5

あなたの 'cb()'関数は一つのページに定義されていて、あなたは*別の*ページからそれを呼び出そうとしています。 – Pointy

+0

あなたの2つの機能は同じページに定義する必要があります。 –

答えて

1

cbは、最初のページにのみ存在します。彼らは同じ起源にしている場合は、あなたの2ページ目にはそう、そのopenerグローバル経て、最初のページのグローバルwindowを参照することができます:

cbは、最初のページでグローバルなので、ためにのみ機能
opener.cb(message); 

をそれはwindowオブジェクトのプロパティです。

しかし、それはweb messagingを使用するクリーナーデザインかもしれませんが、クロスオリジンとしても役立つという利点があります。 1つのページに手を伸ばして別のページで機能を呼び出すのではなく、Webメッセージでページにメッセージを投稿し、メッセージを処理するようにします。 my answer hereに完全で簡単な例があります。

+0

コールバックが実際にどのように動作するかについての私の理解は間違っているかもしれませんし、Webメッセージングが私の必要とするものかもしれません。コールバックを設定するとき、私は将来、ある時点でコードを送信していると思っていました。この例では、[保存]ボタンは保存プロセスをシミュレートし、メインページにメッセージを返します。 opener.cb()アプローチを使用して、別のページの1つのページに存在するコードを実行していました。メッセージは2番目のページのコンソールに出力され、実際に最初のページに戻されずにそのコンソールに表示されました。これは私にはウェブメッセージングがより適していると思われる場所です。 – DenaliHardtail

関連する問題