SQLの窓

2018年07月24日


HTA : 『x-frame-options: SAMEORIGIN』の設定されていないページの情報を IFRAME 内に表示して jQuery で取り出す / iframe内 参照と .clone() と .end()

レスポンスヘッダーに 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 がなければそのまま使えます。しかし、一般的には欲しいページをダウンロードしてローカルに置いて読み込めば全てのページのデータをある程度自動取得できます。




posted by lightbox at 2018-07-24 23:57 | HTA ( HTMLアプリケーション ) | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり