キー ウィザードなどの自動化ツールを使用すると、多くのシナリオで多くのタスクを自動的に完了できるため、作業の効率が大幅に向上します。
この記事では次のことを説明します。 JavaScript を使用して「ボタン ウィザード」を実装し、クリック、フォーカス、入力、その他の操作の自動完了を示します。
上のアニメーションに示すように、次の操作がページ上で自動的に実行されます。
1. 2 つのボタンをクリックします。
2.
入力ボックスにフォーカスを設定します。
3. 入力ボックスにテキストを入力します。
リンク;
原理 複雑ではなく、要素を取得してクリック、フォーカスなどのイベントを実行するだけです。
2 つの問題があります:
1. ID と名前のない要素の場合、getElementById と getElementByName を使用できません。
解決方法は、querySelectorAll を使用してページ上のすべての要素を取得し、ソース コード マッチングを使用して要素を正確に見つけることです
。要素。コードは次のとおりです。
2. 遅延の設定方法: 場所をクリックした後、次の操作を実行するまで数秒待ちます。
解決策は、setTimeOut 関数とコールバック関数を使用することです。コードは次のとおりです。
前述の原則に従って、次のようにクリック、フォーカス、割り当て機能を準備します。
呼び出すときは、ソース コード、遅延値、およびコールバック関数を渡します。
つまり、指定されたソース コードの要素を操作し、一定時間遅延してからコールバック関数を実行します。
以下に示すように、ソース コード部分はページ ビューアーで取得できます。
ここに示されており、上記の例の完全なコードは html として保存して実行します。
<html>
<本文>
<スクリプト>
document.body.addEventListener("クリック", function(e) {
console.log('クリック:',e.originalTarget);
});
</script>
<h1>JS バージョン ボタン ウィザード</h1>
<div>
1. ボタン:<br>
<button style="width: 100px; height:100px;" onclick="alert('1 がクリックされました');">1</button>
<button style="width: 100px; height:100px;" onclick="alert('2 がクリックされました');">2</button>
<br>
<br>
2. 入力ボックス:
<input type="text" value="">
<br>
<br>
3. リンク: <a href="http://jshaman.com" target="iframe1">jshaman.com</a>
<br>
<iframe name="iframe1"></iframe>
</div>
<br>
<時間>
<button onclick="fun1();">自動実行を開始</button>
<br>
次の手順を順番に実行します。<br>
1. 最初と 2 番目のボタンをクリックします。 2. 入力ボックスにフォーカスを設定します。 3. 入力ボックスの値を設定します。 4. リンクをクリックします。
<br>
</body>
<スクリプト>
//クリックイベント//パラメータ:
//outer_html: クリックする要素のソースコード //lay: 遅延 //call_back: コールバック関数 function click(outer_html, late, call_back){
// ページのすべての要素を取得します var all_elements = document.querySelectorAll('*');
//要素を走査 for(i=0; i<all_elements.length; i++){
// 条件を満たす要素を照合 if(all_elements[i].outerHTML==outer_html){
// all_elements[i].click() をクリックします。
}
}
if(遅延&&コールバック){
//何ミリ秒経過後にコールバック関数 setTimeout(call_back, late) を実行
}
};
// フォーカスを設定します。つまり、 // パラメータを選択します。
//outer_html: 要素のソースコード //lay: 遅延 //call_back: コールバック関数 function focus(outer_html, late, call_back){
// ページのすべての要素を取得します var all_elements = document.querySelectorAll('*');
//要素を走査 for(i=0; i<all_elements.length; i++){
// 条件を満たす要素を照合 if(all_elements[i].outerHTML==outer_html){
// フォーカスを設定します all_elements[i].focus();
}
}
if(遅延&&コールバック){
//何ミリ秒経過後にコールバック関数 setTimeout(call_back, late) を実行
}
};
//コンテンツの設定関数 setvalue(outer_html, type, value, late, call_back){
// ページのすべての要素を取得します var all_elements = document.querySelectorAll('*');
//要素を走査 for(i=0; i<all_elements.length; i++){
// 条件を満たす要素を照合 if(all_elements[i].outerHTML==outer_html){
// all_elements[i][type] = value をクリックします。
}
}
if(遅延&&コールバック){
//何ミリ秒経過後にコールバック関数 setTimeout(call_back, late) を実行
}
};
// クリックボタン function fun1(){
//クリックされる要素のソースコード var inner_html = `<button style="width: 100px; height:100px;" onclick="alert('1 was clicked');">1</button>`;
click(outer_html, 1000, fun2);
}
// クリックボタン function fun2(){
//クリックされる要素のソースコード var inner_html = `<button style="width: 100px; height:100px;" onclick="alert('2 was clicked');">2</button>`;
click(outer_html, 1000, fun3);
}
//入力関数 fun3(){ のフォーカスと値を設定します。
//クリックされる要素のソースコード var external_html = `<input type="text" value="">`;
フォーカス(outer_html);
setvalue(outer_html,"value","abc",1000,call_back_function)
}
//リンクをクリック function call_back_function(){
var out_html = `<a href="http://jshaman.com" target="iframe1">jshaman.com</a>`;
クリック(out_html);
console.log("自動クリックが完了しました")
}
</script>
</html>オープンで透過的な、関数ロジックを簡単に理解でき、自由に変更することもできます。コードのセキュリティを向上させたい場合は、コードを暗号化して保護する必要があります。たとえば、専門的な JavaScript コード難読化暗号化ツールである JShaman を使用できます。上記の完全なソース コード内の JavaScript コードは、JShaman によって暗号化されると次の形式になりますが、その使用にはいかなる影響もありません。
注: 左側は元のコード、右側は暗号化されたコードです。
関連する推奨事項: [JavaScript ビデオ チュートリアル]
上記は、JavaScript を使用して「ボタン ウィザード」を実装する方法を説明するものです。詳細については、php 中国語 Web サイトの他の関連記事にご注目ください。
