レスポンスヘッダーに x-frame-options: SAMEORIGIN が設定されているとそのページは同一ドメインでないと IFRAME に読み込んで表示する事ができません。 さらに、x-frame-options: SAMEORIGIN が設定されていなくても、通常のブラウザであれば表示する事はできても、JavaScript でアクセスする事ができません。 IFRAME 内に x-frame-options: SAMEORIGIN の設定されていない WEB ページを表示してかつ、JavaScript で値を取り出せるのは HTA だけです。
<html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
// *************************************
// デスクトップ中央
// *************************************
function centerWindow( w, h ) {
// ウインドウの位置とサイズ
top.resizeTo( w, h );
top.moveTo((screen.width-w)/2, (screen.height-h)/2 )
}
</script>
<script>
// ウインドウの位置とサイズ
centerWindow( 860, 600 );
// テーブルの行作成用
var row_data = "";
$(function(){
// レジストリキーの値一覧
$("#act").on("click", function(){
var domdoc = $("iframe[name='extend']").get(0).contentWindow.document;
$(domdoc).find("#datalist p").each( function(idx){
row_data = $("<tr></tr>")
.addClass("row_data")
.appendTo( "#tbl" );
// 複製を取得して複製内の span を削除して
// .end() で参照を p_clone に戻す
var p_clone = $(this).clone().find("span").remove().end();
// 複製内の span を削除
// p 内にある span のテキスト
$("<td></td>")
.text($(this).find("span").text())
.appendTo( row_data );
// span が削除された p 内のテキスト
$("<td></td>")
.text(p_clone.text())
.appendTo( row_data );
});
});
// 再表示
$("#view").on("click", function(){
location.reload(true);
});
// IE のドキュメントモードを表示
$("<div></div>")
.text( document.documentMode )
.css( { "float" : "right", "color": "#808080", "font-size": "8px" } )
.insertBefore( $("p").eq(0) );
// ボタン表示位置微調整
$( ".btn" ).css({
"margin-top": "-4px"
});
});
</script>
<style>
/* ブロックを左右に表示 */
.ttl {
display: inline-block;
width: 230px;
vertical-align: top;
}
.entry {
display: inline-block;
}
.line {
margin-bottom: 0;
}
#head {
padding: 16px;
}
/* DIV を Window 下部にフィット */
html,body {
height: 100%;
}
body {
margin: 0;
}
#head {
padding: 16px;
width: 100%;
height: 120px;
background-color: #e0e0e0;
}
.extend {
padding: 4px 16px;
display: block;
margin-left: auto;
margin-right: auto;
width: calc( 100% - 3px );
height: calc( 100% - 120px - 2px );
border: solid 2px #c0c0c0;
overflow: scroll;
}
/* テーブルのカーソル用 */
.row_data td, .row_data th {
cursor: default!important;
white-space: pre;
}
</style>
</head>
<body>
<div id="head">
<p class="ttl">
外部IFRAMEの内容を取り出す
</p>
<p class="entry">
<input
id="act"
class="ml-4 btn btn-outline-primary"
type="button"
value="一覧表示">
<input
class="ml-4 btn btn-info btn-sm"
id="view"
type="button"
value="再表示">
</p>
<p class="line"></p>
<h4 class="text-danger"></h4>
</div>
<div class="extend">
<table class="table table-hover">
<tbody id="tbl">
</tbody>
</table>
<br>
</div>
<iframe class="extend" name="extend" APPLICATION="yes" src="https://lightbox.sakura.ne.jp/demo/iframe_target.html"></iframe>
</body>
</html>
jQuery でテキストノードの文字列を取り出す 以下のような HTML では、テキスト がテキストノードにあたります。テキスト2 はテキストノードでは無いので、a に対するセレクタで取得できますが、テキストと同様の方法で取り出します。 参考 : [Javascript] jQueryでテキストノードを選択するにはどうすればよいですか？
<div id="datalist"> <p><span>18/07/23</span>テキスト</p> <p><span>18/07/22</span>テキスト</p> <p><span>18/07/18</span>テキスト</p> <p><span>18/07/16</span><a href="URL">テキスト2</a></p> <p><span>18/07/15</span><a href="URL">テキスト2</a></p> <p><span>18/07/15</span><a href="URL">テキスト2</a></p> </div></body>
IFRAME 内のドキュメント参照と .clone() と .end()
1) var domdoc = $("iframe[name='extend']").get(0).contentWindow.document で、DOM として IFRAME 内の document を取得します
2) テキストノードを取得する為に span を削除する必要があるので、clone() で同じものを作成してその中から span を削除します
3) 削除した段階で、参照が span に移行しているので、end() で一つ前に戻って、そこから text() でデータを取得します
var domdoc = $("iframe[name='extend']").get(0).contentWindow.document;
$(domdoc).find("#datalist p").each( function(idx){
row_data = $("<tr></tr>")
.addClass("row_data")
.appendTo( "#tbl" );
// 複製を取得して複製内の span を削除して
// .end() で参照を p_clone に戻す
var p_clone = $(this).clone().find("span").remove().end();
// 複製内の span を削除
// p 内にある span のテキスト
$("<td></td>")
.text($(this).find("span").text())
.appendTo( row_data );
// span が削除された p 内のテキスト
$("<td></td>")
.text(p_clone.text())
.appendTo( row_data );
});
WEB ページのデータを HTA で自動的に取得したい場合、x-frame-options: SAMEORIGIN がなければそのまま使えます。しかし、一般的には欲しいページをダウンロードしてローカルに置いて読み込めば全てのページのデータをある程度自動取得できます。
|
|
【HTA ( HTMLアプリケーション )の最新記事】
- HTA / ADO / Jscript : Access( .accdb .mdb ) の読み込みと表示
- HTML Application : JavaScript で新しい Excel の Book を作成する
- HTML Application : JavaScript で Windows のいろいろなフォルダを開く
- HTA (または IE11) で フォルダ選択ダイアログからフォルダとファイルの一覧
- HTA (または IE11) で hostname を実行して標準出力からPC名の取得
- HTA (HTMLアプリケーション) で JavaScript と VBScript を混在させる手法 / GetObject を VBScript 側で使用する
- HTA + Basp21 + jQuery + twitter-bootstrap(4.1.1) でメール受信ツール
- HTA + Basp21 + jQuery + twitter-bootstrap(4.1.1) でメール送信ツール
