SQLの窓

2015年11月10日


FRAME の代替として使う IFRAME パッケージ



デモページ

IFRAME を FRAME に見立てて、JavaScript で、ブラウザ全体で表示できるようにコントロールしています。FRAME と違って、IFRAME は元々のウインドウ上の一つのコンテンツなので、IFRAME の上に jQuery のコンテンツを表示する事ができます。また、PHP としては、送信結果を IFRAME 内で表示するように送信できるので、元のコンテンツの書き換えが必要無くなります。

index.php
<?php
session_start();
$_SESSION["charset"] = "utf-8";
$_SESSION["iframe_id"] = "target";

header( "Content-Type: text/html; Charset={$_SESSION["charset"]}" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "x-ua-compatible: IE=11" );

// *************************************
// 画面
// *************************************
require_once("view.php");
?>


view.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=<?= $_SESSION["charset"] ?>">
<title>PHPテンプレート</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="css.php">

<link rel="stylesheet" href="iframe_css.php">
<script src="iframe_js.php"></script>

<style>
</style>
<script>
$(function() {


});

</script>
</head>
<body>
<div id="wrapper">
	<div id="head_unit">
		<form
			method="get"
			target="target_accept"
			action="accept_r.php">

			<input
				type="text" 
				name="tx1">

			<input
				type="button"
				value="リセット"
				style="background-color:white;"
				onclick="location.reload(true);">

			<input
				 type="submit"
				name="send"
				value="送信">

		</form>
	</div>
	<iframe
		src="accept_r.php"
		id="<?= $_SESSION["iframe_id"] ?>"
		name="target_accept"
		frameborder="0"
	></iframe>
</div>

</body>
</html>


view_iframe.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=<?= $_SESSION["charset"] ?>">

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="css.php">

<style>
</style>
<script>
// jQuery 初期処理
$(function() {


});
</script>
</head>
<body>

<div>
<img src="cs.jpg" style="border: solid 1px #000000">
</div>

<pre>
<?= print_r($_GET,true) ?>
</pre>

</body>
</html>


iframe_js.php

iframe の主なコントールを行います。( 横幅は css で設定 )
<?php
session_start();
header( "Content-Type: text/javascript; Charset={$_SESSION["charset"]}" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
?>
// IFRAME フィット
function control_page_iframe(iframe_id) {
	var height = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);
	var head_height = $( "#head_unit" ).get(0).clientHeight;

	// -7 は、場合によっては調整が必要になるかもしれません
	$("#" + iframe_id ).css("height", (height - parseInt(head_height)-7) + "px");
}

// jQuery 初期処理
$(function() {

	var iframe_id = "<?= $_SESSION["iframe_id"] ?>";

	// IFRAME フィット用
	$(window).on("resize", function(){

		$("#" + iframe_id ).hide();
		control_page_iframe(iframe_id);
		$("#" + iframe_id ).show();

	});

	// 初期 IFRAME フィット
	control_page_iframe(iframe_id);

});


iframe_css.php
<?php
session_start();
header( "Content-Type: text/css; Charset={$_SESSION["charset"]}" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
?>
@charset <?= $_SESSION["charset"] ?>;

body {
	margin: 0;
}
#wrapper {
	background-color: #ffffff;
}
#head_unit {
	padding: 15px 0 10px 15px;
}
#<?= $_SESSION["iframe_id"] ?> {
	/* IFRAME の横調整は、ブラウザに任せます */
	width: 100%;
}


accept_r.php

本体の FORM から呼び出される(action 属性) PHP です。
<?php
session_start();
header( "Content-Type: text/html; Charset={$_SESSION["charset"]}" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "x-ua-compatible: IE=11" );

// *************************************
// 画面
// *************************************
require_once("view_iframe.php");
?>




タグ:PHP iframe
【IFRAME パッケージの最新記事】
posted by lightbox at 2015-11-10 00:22 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

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

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり