JavaScript/HTMLおぼえがき

｜JavaScript｜JavaScript/HTML｜ サイトマップ｜ホーム｜

画面制御/印刷

ページ戻し、進め　　　戻る

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>ページ戻し・進め</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<p>ページに戻る・進む</p>
<hr>
<p>Ｐａｇｅ１</p>
<p>リンク先：　<a href="page.html">Ｐａｇｅ１</a>　<a href="page2.html">Ｐａｇｅ２</a>　<a href="page3.html">Ｐａｇｅ３</a></p>
<p><a href="#"onClick="history.back(); return false;">前のページにもどる</a><br>
<a href="#"onClick="history.forward(); return false;">次のページにすすむ</a><br>
<a href="#"onClick="history.go(-2); return false;">2つ前のページにもどる</a><br>
<a href="javascript:history.back()">もどる</a><br>
<a href="javascript:history.forward()">すすむ</a></p>
</body>
</html>

カラーダイアログ　　　戻る

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>カラーダイアログ</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
<!--
function ChooseCol(h){
  switch(h){
    case "bc":
      ChooseCol_Dig();
        if (col==0) {return;}
        document.body.style.backgroundColor=col;   //カラー設定
        frmFORM.bc.value=col;  //カラーの16進数表示
        break;
    case "cc":
        ChooseCol_Dig();
        if (col==0) {return;}
        document.body.style.color=col;
        frmFORM.cc.value=col;
        break;
    }  
}
function ChooseCol_Dig(){
  col=Dialog.ChooseColorDlg();  //戻り値は10進数のカラーコード
  if (col==false) return;             //キャンセルが選択された場合 
  col="000000"+col.toString(16);   //16進数カラーコードに変換
  col=col.substring(col.length-6,col.length);  //16進数カラーコード右端6桁のみを取得
  col="#"+col ;
}
//-->
</script> </head>
<body>
ページ戻し、進め
<object id="Dialog" classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0" height="0">
</object>
<p>カラーダイアログ</p>
<hr>
<form name="frmFORM">
<p><input type="button" value="背景色選択" onclick="ChooseCol('bc')">
<input type="text" name="bc" size="8" >

<p><input type="button" value="文字色選択" onclick="ChooseCol('cc')"> 
<input type="text" name="cc" size="8" >  
</p>
<p><b>文字の色</b> 
</p>
</form>
</body>
</html>

ウィンドウズダイアログ　　　戻る

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Windowダイアログ</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
<!--
function disp() {
  if(window.confirm('実行しますか？')) {
    user = window.prompt("ユーザー名を入力してください","田中");
    window.alert('ユーザ名は'+user);// 警告ダイアログを表示
	}
	else{
      window.alert('キャンセルされました');// 警告ダイアログを表示
	}
}
// -->
</script>
</head>
<body>
<p>　</p>
<p>　</p>
<p>
<input type="button" value="確認ダイアログ" onClick="disp()"></p>
<p>データ入力ダイアログが動作しない場合は、
インターネットエクスプローラのインターネットオプションのセキュリティ設定で
レベルのカスタマイズを選択してスクリプトのスクリプト化されたウインドウを使って情報の入力を求めることを、
Ｗｅｂサイトに許可するを「有効にする」</p>
</body>
</html>

ウインドウ間のデータ受け渡し　　　戻る＞

＜親ウインドウ＞

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>ウインドウ間のデータ受け渡し（親ウインドウ）</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script> 
function opn(){ window.open('win-sub.html','','width=350,height=200');}
</script>
</head>
<body>
<form>
<p>ウインドウ間のデータ受け渡し（親ウインドウ）</p>
<p><input id="min-put" value="子に渡す">　子に渡す</p>
<p><input id="min-get" >　子からもらう
<input type="button" value="開く" onclick="opn()"><br>
</p>
</form>
</body>
</html>

＜子ウインドウ＞

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>ウインドウ間のデータ受け渡し（子ウインドウ）</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script> 
window.focus()
function getdata(){
  w = window.opener.document.getElementById("min-put").value ;
  document.getElementById("sub-get").value = w ;
}
function putdata(){
  w = document.getElementById("sub-put").value ;
  window.opener.document.getElementById("min-get").value = w ;
  window.close() ;
}
</script>
</head>
<body onload="getdata()">
<form>
<p>ウインドウ間のデータ受け渡し（子ウインドウ）</p>
<p><input type="text" value="" id="sub-get">　親からもらう</p>
<p><input type="text" value="親に渡す" id="sub-put">　親に渡す　
<input type="button" value="渡す" onclick="putdata()"></p>
</form>
</body>
</html>

　

印刷制御　　　戻る

  <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>印刷</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
<!--

@media print{
  .noprint{
	display: none; /*印刷しない指定*/
}               
  body{
	padding:0px;margin:0px;
}
}
@page { size: 91mm 55mm ;  margin: 0mm; }  /*ページサイズの指定*/
.page{
	     /*ページの指定*/
  width:91mm;height:54mm;  /*ページサイズは@pageのサイズより小さい値を指定する*/
  position:relative;
  border-width:1px;border-style:solid;border-color:#FF0000;
  padding:0px;margin:0px;
  page-break-after : always;               /*改行指定*/
}
.pdata{
	   /*印字データ領域の指定*/	                                    
  width:80mm;height:15mm;
  position:absolute; top:20mm; left:5mm;
  font-size:20pt;font-family:ＭＳ ゴシック;
  color:#000000;background-color:#FFFFFF;
  border-width:1px;border-style:solid;border-color:#0000FF;
  padding:0px;margin:0px;
  text-align:reft;
}
-->
</style>
</head>
<body>
<div class="noprint">
  <button onclick="window.print();">印刷</button>
  <br>
</div>
<div class="page">
  <div class="pdata">名刺サイズの印刷<br>ページ１</div>
</div>
<div class="page">
  <div class="pdata">名刺サイズの印刷<br>ページ２</div>
</div>
</body>
</html>

　

印刷制御（印刷方向（縦・横）指定）　　　戻る

  <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>印刷</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
<!--
@charset "UTF-8";
@media print{.noprint{
	display : none ;
}
  body{
	padding:0px;margin:0px ;
} 
}
@media screen{ .noscreen{
	display:none ;
} }
@page a4t{ size: 210mm 297mm ;  margin: 0mm; } 
@page a4y{ size: 297mm 210mm ;  margin: 0mm; } 
.pages{
	padding:0px;margin:0px ;
}
.sheet-t{
  page : a4t;
  width:210mm;height:297mm;
  position:relative;
  font-size:14pt;font-family:ＭＳ ゴシック;
  color:#000000;background-color:#FFFFFF;
  border-width:1px;border-style:solid;border-color:#FF0000;
  padding:40px;margin:0px;
  page-break-before: always;
}
.sheet-y{
  page : a4y;
  width:297mm;height:210mm;
  position:relative;
  font-size:14pt;font-family:ＭＳ ゴシック;
  color:#000000;background-color:#FFFFFF;
  border-width:1px;border-style:solid;border-color:#FF0000;
  padding:40px;margin:0px;
/*page-break-after : always;*/
  page-break-before: always;
}
-->
</style>
</head>
<body>
<div class="noprint">
  <button onclick="window.print();">印刷</button>
  <br>
</div>
<div class="sheet-t">用紙の向き縦の印刷<br><br>ページ１</div>
<div class="sheet-y">用紙の向き横の印刷<br><br>ページ２</div>
</body>
</html>


｜JavaScript｜JavaScript/HTML｜ サイトマップ｜ホーム｜