0

シナリオ

サードパーティのサイトに少し使いやすさを追加するために、Chrome 拡張機能/ユーザー スクリプトを作成しています。拡張機能が作成されたページには、`addEventListener` (`onclick` およびその他のプロパティは空) を介して (要素ごとに、バブリングなしで) `click` イベント リスナーがアタッチされたいくつかの要素があります。私の拡張機能は、要素の 1 つを複製 (`cloneNode`) し、それをリストに追加します。

たとえば、これで、

<div id="list">
  <div id="d1">A</div>
  <div id="d2">B</div>
  <div id="d3">C</div>
</div>

私の拡張機能は D 要素を追加します。

問題

リストの拡張は正常に機能しますが、元のノードをクリックすると期待どおりのアクションが実行されますが、新しいノードをクリックしても何も起こりません。

テスト

テスト 1

Chrome の開発者ツールで要素のイベント リスナーを調べ、「addEventListener」を使用して無名関数を新しい要素にコピーしようとしましたが (パラメーターを複製するようにしてください)、うまくいきませんでした。期待されるアクションの一部は実行されましたが、すべてではありませんでした。

テスト 2

[この質問][1]のトリックを使用するというanfilatの提案を試しました。新しいノードの `addEventHanlder` を呼び出す `script` ブロックを挿入したところ、実際に新しいハンドラがありました (`.JS` ファイルではなく、サイト (`.JS` ファイルではなく、ページ) を参照する `sourceName` を使用)。ただし、それでも変数が見つからないというエラーがスローされました。

仮説

以下に示すように、イベント リスナーの「sourceName」と「lineNumber」で参照されるように、クリック ハンドラーが外部の「.JS」で関数を呼び出すため、ドメインの問題であると思われます。「listenerBody」は同じですが、ソースが異なることに注意してください。

質問

要素のハンドラーにアクセス、コピー、またはクローンを作成したり、`lineNumber` と `sourceName` を編集したりする方法はありますか?

付録 A: 図

図 1.JS :サイト上のを参照する元の要素のハンドラ(わずかなファイル名の編集あり):

サイト

図 2 : 拡張機能を参照する新しい要素のハンドラー:

拡大

4

1 に答える 1

1

小さな動作テストを書きました。

Crome 拡張インジェクト スクリプト:

var myScriptElement = document.createElement('script'); 
myScriptElement.innerHTML =
  'b=document.getElementById("button");' +
  'c=b.cloneNode(true);' +
  'b.parentElement.appendChild(c);' +
  'c.addEventListener("click", function(e){foo("from new button")}, false);';
document.querySelector('head').appendChild(myScriptElement);

テスト HTML:

<html>
<script type='text/javascript' src='test.js'></script>
<body>
<button id='button'>test</button>
<script>
document.getElementById('button').addEventListener('click', function (event) {
  foo('from page');
}, false);
</script>
</body>
</html>

およびtest.js:

function foo(text) {
  console.log(text);
};
于 2012-02-12T08:36:37.067 に答える