-1

所有していないが改善したい Web アプリケーションをハッキングしようとしています。

同じドメインの iframe の DOM の要素の前に HTML を追加したいと思います。コンソールからのサンプルを次に示します。

jQ(".x-panel-body.x-panel-body-noheader").find("iframe").contents().find("body").find("#WorkspaceFrame").find(".x-panel-tbar.x-panel-tbar-noheader").find(".x-toolbar-right").find(".x-toolbar-right-ct").find("table");
[
<table cellspacing=​"0">​…​&lt;/table>, 
<table id=​"ext-comp-1046" cellspacing=​"0" class=​"x-btn   x-btn-text-icon" style=​"width:​ auto;​">​…​&lt;/table>​, 
<table cellspacing=​"0">​…​&lt;/table>​, 
<table cellspacing=​"0">​…​&lt;/table>​, 
<table id=​"ext-comp-1067" cellspacing=​"0" class=​"x-btn   x-btn-text-icon " style=​"width:​ auto;​">​…​&lt;/table>​, 
<table id=​"ext-comp-1068" cellspacing=​"0" class=​"x-btn   x-btn-text-icon " style=​"width:​ auto;​">​…​&lt;/table>​, 
<table id=​"ext-comp-1069" cellspacing=​"0" class=​"x-btn   x-btn-text-icon" style=​"width:​ auto;​">​…​&lt;/table>​, 
<table cellspacing=​"0">​…​&lt;/table>​, 
<table cellspacing=​"0">​…​&lt;/table>​, 
<table id=​"ext-comp-1253" cellspacing=​"0" class=​"x-btn   x-btn-text-icon x-item-disabled" style=​"width:​ auto;​">​…​&lt;/table>​, 
<table id=​"ext-comp-1254" cellspacing=​"0" class=​"x-btn   x-btn-text-icon" style=​"width:​ auto;​">​…​&lt;/table>​, 
<table cellspacing=​"0">​…​&lt;/table>​, 
<table cellspacing=​"0">​…​&lt;/table>​, 
<table id=​"ext-comp-1760" cellspacing=​"0" class=​"x-btn   x-btn-text-icon" style=​"width:​ auto;​">​…​&lt;/table>​, 
<table cellspacing=​"0">​…​&lt;/table>​
]

jQ私のjQueryの名前です(私は使用できません$)。

したがって、基本的にはコンソールから機能しsaveButton、配列が含まれています。これが私のスクリプトです:

saveButton=jQ(".x-panel-body.x-panel-body-noheader").find("iframe").contents().find("body").find("#WorkspaceFrame").find(".x-panel-tbar.x-panel-tbar-noheader").find(".x-toolbar-right").find(".x-toolbar-right-ct").find("table");
console.log(saveButton);
jQ.each(saveButton, new function(i,v) { console.log("#"+i+": "+v); });

コンソール出力は次のとおりです。

[prevObject: b.fn.b.init[0], context: document, selector: "body #WorkspaceFrame .x-panel-tbar.x-panel-tbar-noheader .x-toolbar-right .x-toolbar-right-ct table", jquery: "1.9.1", constructor: function…]
#undefined: undefined

saveButtonオブジェクトもそうですが、配列ではありません。これは、failed によって確認されjQ.eachます。

テーブルの 1 つ (常に 3 番目) を取り、コールしたいと思い.before('<p>something</p>')ます。試してみsaveButton[2].before('<p>HI</p>')ましたが、うまくいきません。


Zoltanの回答のヒントの後の新しい試みは次のとおりです。

jQ(".x-panel-body.x-panel-body-noheader").find("iframe").contents().find("body").find("#WorkspaceFrame").find(".x-panel-tbar.x-panel-tbar-noheader").find(".x-toolbar-right").find(".x-toolbar-right-ct").find("table").eq(8).find(">:first-child").find(">:first-child").find(">:first-child").before('<td class="x-toolbar-cell"><button>Test</button></td>');

コンソールにこれを適切に入力すると、必要な場所にボタンが追加されますが、JS コードの同じ行が機能しません。何を与える?

4

2 に答える 2

0

ユーザースクリプトよりもはるかに遅いため、コンソールで機能します。;) ユーザー スクリプトは、iframe の読み込みが完了するずっと前に起動します。これは、iframe が AJAX を使用してコンテンツを設定していない場合でも同様です。

これに対処する最も簡単な方法は、問題の iframe で直接動作するようにユーザー スクリプトを調整することです。

ただし、<iframe>同じドメインのように見えるため、AJAX ページで必要な同じ手法を使用してその iframe コンテンツを処理することもできます。この場合、ユーティリティwaitForKeyElementsうまく機能します。

これはあなたのために働くはずの完全なスクリプトです(ただし、ターゲットページがわからないためテストされていません)。Chrome を実行している場合は、それを実行するために Tampermonkey をインストールする必要があることに注意してください (とにかくインストールする必要があります)。:

// ==UserScript==
// @name     _Interacting with iframed content
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
waitForKeyElements (
    //-- Double check this selector from the console...
    "#WorkspaceFrame .x-toolbar-right-ct table:eq(8) >:first-child >:first-child >:first-child",
    addButton, 
    false, 
    ".x-panel-body.x-panel-body-noheader iframe"
);

function addButton (jNode) {
    jNode.before ('<td class="x-toolbar-cell"><button class="gmMyButton">Test</button></td>');
}



おまけとして、このようにボタンをアクティブにします。(競合状態を避けるために遅延が必要です。):

waitForKeyElements (
    "body", 
    addButtonHandler, 
    false, 
    ".x-panel-body.x-panel-body-noheader iframe"
);

function addButtonHandler (jNode) {
    jNode.on ("click", "button.gmMyButton", myButtonHandler);
}

function myButtonHandler (evt) {
    var btn = $(evt.target);

    console.log ("You just clicked button '" + btn.text() + "'.");
}
于 2013-11-08T02:30:21.830 に答える
0

.eq(n) を使用して、選択範囲内の n 番目のオブジェクトを取得できます

saveButton.eq(n).before('<p>HI</p>')

saveButton[2] は機能しません。この方法では、.before 関数を使用せずに単純な要素を取得できますが、.eq は jQuery でラップされたオブジェクトを返し、その上で jQuery 関数を呼び出すことができます。

問題の原因は、選択したものが iframe 内にあることである可能性もあります。コンソールから JS を実行すると、外側のウィンドウにいるため、iframe に「ステップ イン」する必要があります。しかし、JS は内側のウィンドウで実行される可能性があり、そこから同じクエリを実行しても iframe が見つからないため、saveButton 変数には何も返されません。

于 2013-11-07T14:12:23.063 に答える