デモページ 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");
?>
|
|
【IFRAME パッケージの最新記事】
- CSS の calc 関数を使って、IFRAME を画面下半分にフィットさせる
- jQuery プラグイン : Columns と PHP の連携と、ドキュメントには書かれていないカスタマイズ方法
- １会話・IFRAME(TCPDF)テンプレート : jQuery + Bootstrap(css) + mmenu + Firebase + TCPDF + PHP
- jquery.ajax-combobox(オートコンプリートとドロップダウンリストを組み合わせたコンボボックス) を使用して、入力可能なコンボックス( しかもリストはページャ付き )
- jquery.ajax-combobox で JSON をデータに使う場合、複数項目を検索対象にする為の簡単な改造
- FileSaver.js と canvas-toBlob.js を使って、canvas で表示されているイメージを保存する
- クリックしたコンテンツ以外を暗転する jQuery TOOLS の expose プラグイン
- tabIndent.js : テキストエリアでタブが使用できます。オリジナルを少し改造して、jQuery の名前空間に登録しました。
- 何もかも回転する、jQuery の簡単なプラグイン実装
- jQuery UI の タブ と アコーディオンで、スキンのチェック
- tableMagic で作成されたテーブルを fixedheadertable でヘッダと左端列を固定 / jQuery プラグイン
- jQuery : Columns で作成されたテーブルを fixedTblHdrLftCol でヘッダと左列を固定( CSS カスタマイズ )
- IOS のようなスクロールバーインターフェイスを jQuery のプラグインとして実現する jQuery.NiceScroll
- jQuery : 一つの 複数選択の SELECT 要素から二つのリストボックスを作成して、必要なグループ選択するプラグイン / multiselect.js と PHP との連携
- jQuery プラグイン mmenu( 左右からスライドインするメニュー ) を F1 キーと F2 キーに割り当てて、左右から二つのメニューを開く
- jQuery で、ページ内で F1 キー(HELP) を起動させないようにする / IFRAME 内も同時対応
