iframeの中のボタンで包括ブロックを先頭に戻す
2021/5/10 17:20頃
先頭に戻るためのリンクは「<a href="#top">戻る</a>」が便利。ただ、そのリンクがiframeの中にあるとiframeの中が先頭に戻るだけで、親ブロックは先頭に戻らない。「<a href="#top" target="_top">戻る</a>」「<a href="#top" target="_parent">戻る</a>」にすると、 iframeに表示していたページが親ブロックに表示されてしまう。
これまでは対処法として次のようにしていた。
<a href="javascript:location.href=location.href;" title="戻る" target="_top">戻る</a>
ページの先頭に戻すボタンをiframe内に設置するには次のようなJavascriptを使えば良い。ついでに親ブロックからiframe内を先頭に戻すボタンも用意した。
親（test_out.html）のソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>iframe内</title>
<script type="text/javascript">
<!--
// function totopiframe(){alert(new XMLSerializer().serializeToString(document.getElementById("ifr").contentWindow.document));}
function totopiframe(){document.getElementById("ifr").contentWindow.scrollTo(0,0);}
-->
</script>
</head>
<body>
<p style="height:1000px;">下の方にiframe</p>
<div>
<iframe src="test_in.html" id="ifr" style="height:200px;overflow:scroll;" title="iframe"></iframe>
</div>
<button onclick="totopiframe()" tabindex="0" accesskey="0">iframe内を先頭に戻す</button>
</body>
</html>
iframe内（test_in.html）のソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>iframe内</title>
<script type="text/javascript">
<!--
// function totopparent(){alert(new XMLSerializer().serializeToString(window.parent.document));}
function totopparent(){window.parent.scrollTo(0,0);}
-->
</script>
</head>
<body>
<button onclick="totopparent()" tabindex="0" accesskey="0">包括ブロックを先頭に戻す</button>
<p style="height:400px;">iframe内</p>
</body>
</html>
追記：2021/5/10 17:00頃
iframeの内側から別のiframe（id="ifr2"）を先頭に戻す関数。
function totopiframe2(){parent.document.getElementById("ifr2").contentWindow.scrollTo(0,0);}
コメント
コメントを投稿