iframeを使わずにコンテンツを切り替える

　iframeの中に表示するコンテンツを切り替えるコードのようなiframeを使わないコード、要するにiframeを使わずにコンテンツを切り替えるJavaScript。

// HTML
<div id="content"></div>
<button onclick="changeContent('Hello, World!')">Click me</button>

// JavaScript
function changeContent(newContent) {
document.getElementById('content').innerHTML = newContent;
}

サンプル

test20231028-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>コンテンツを切り替えてもスクロールが維持されてしまう問題</title>
<style>
#content {
   height:100px;
   width:300px;
   overflow-y:scroll;
   line-height:3em;
}
.button{
   width:300px;
   border:1px solid gray;
   padding:5px;
}
</style>
</head>
<body>
<div id="content">
<p>下のボタンでコンテンツ変更</p>
</div>
<div class="button" onclick="changeContent('一つ目のコンテンツ１行目<br>一つ目のコンテンツ２行目<br>一つ目のコンテンツ３行目<br>')">
一つ目
</div>
<div class="button" onclick="changeContent('二つ目のコンテンツ１行目<br>二つ目のコンテンツ２行目<br>二つ目のコンテンツ３行目<br>')">
二つ目
</div>
<script>
function changeContent(newContent) {
   document.getElementById('content').innerHTML = newContent;
}
</script>
</body>
</html>

コンテンツを切り替えた際に一番最初から表示させるためには scrollTop プロパティを使用してスクロール位置をリセットする。

test20231028-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>コンテンツを切り替えたらちゃんと最初から表示されるページ</title>
<style>
#content {
   height:100px;
   width:300px;
   overflow-y:scroll;
   line-height:3em;
}
.button{
   width:300px;
   border:1px solid gray;
   padding:5px;
}
</style>
</head>
<body>
<div id="content">
<p>下のボタンでコンテンツ変更</p>
</div>
<div class="button" onclick="changeContent('一つ目のコンテンツ１行目<br>一つ目のコンテンツ２行目<br>一つ目のコンテンツ３行目<br>')">
一つ目
</div>
<div class="button" onclick="changeContent('二つ目のコンテンツ１行目<br>二つ目のコンテンツ２行目<br>二つ目のコンテンツ３行目<br>')">
二つ目
</div>
<script>
function changeContent(newContent) {
   var contentDiv = document.getElementById('content');
   contentDiv.innerHTML = newContent;
   contentDiv.scrollTop = 0; // スクロール位置をリセット
}
</script>
</body>
</html>

　その他、新しいコンテンツを表示するたびにdiv要素自体を新しく作り直す。

test20231028-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>コンテンツを切り替えたらちゃんと最初から表示されるページ</title>
<style>
#content {
   height:100px;
   width:300px;
   overflow-y:scroll;
   line-height:3em;
}
.button{
   width:300px;
   border:1px solid gray;
   padding:5px;
}
</style>
</head>
<body>
<div id="content-container">
<div id="content">
<p>下のボタンでコンテンツ変更</p>
</div>
</div>
<div class="button" onclick="changeContent('一つ目のコンテンツ１行目<br>一つ目のコンテンツ２行目<br>一つ目のコンテンツ３行目<br>')">
一つ目
</div>
<div class="button" onclick="changeContent('二つ目のコンテンツ１行目<br>二つ目のコンテンツ２行目<br>二つ目のコンテンツ３行目<br>')">
二つ目
</div>
<script>
function changeContent(newContent) {
    var contentContainer = document.getElementById('content-container');
    contentContainer.innerHTML = '<div id="content">' + newContent + '<\/div>';
}
</script>
</body>
</html>

　他には、scrollIntoView()メソッドを使用することで、コンテンツを切り替えた際に特定の要素がビューポートの一番上に来るようにスクロールさせる方法があるが、~~Firefoxのバージョンが65未満の場合、またはscrollIntoView()メソッドに対するサポートが無効になっている場合には動作しないらしい。最新のFirefoxでは機能するが、~~次のようにFirefoxを狙い撃ちにして機能させないようにする、というかFirefoxでscrollIntoView() を実行させない方法はある。

test20231028-4.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>コンテンツを切り替えてもFirefoxではスクロールが維持されてしまう問題</title>
<style>
#content {
   height:100px;
   width:300px;
   overflow-y:scroll;
   line-height:3em;
}
.button{
   width:300px;
   border:1px solid gray;
   padding:5px;
}
</style>
</head>
<body>
<div id="content">
<p>下のボタンでコンテンツ変更</p>
</div>
<div class="button" onclick="changeContent('一つ目のコンテンツ１行目<br>一つ目のコンテンツ２行目<br>一つ目のコンテンツ３行目<br>')">
一つ目
</div>
<div class="button" onclick="changeContent('二つ目のコンテンツ１行目<br>二つ目のコンテンツ２行目<br>二つ目のコンテンツ３行目<br>')">
二つ目
</div>
<script>
function changeContent(newContent) {
    var contentDiv = document.getElementById('content');
    contentDiv.innerHTML = '<p id="top">' + newContent + '<\/p>';
    if (navigator.userAgent.indexOf('Firefox') == -1) {
        document.getElementById('top').scrollIntoView();
    }
}
</script>
</body>
</html>

メールソフトみたいなコードを作ると次のようになる。

test20231028-5.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メールソフトみたいなコード</title>
<style>
#content-container {
   position: absolute;
   top: 120px;
   left: 10px;
   width:300px;
   border:1px solid gray; padding:5px;
   overflow: auto;
}
#button-container {
   position: absolute;
   top: 10px;
   left: 10px;
   height:100px;
   width:300px;
   border:1px solid gray; padding:5px;
   overflow-x: hidden;
   overflow-y: scroll;
}
#content {
   height:100px;
   width:300px;
   line-height:3em;
}
.button{
   width:300px;
   border-bottom:1px solid gray;
   padding:5px;
}
</style>
</head>
<body>
<div id="content-container">
<div id="content">
<p>上のボタンでコンテンツ変更</p>
</div>
</div>
<div id="button-container">
<div class="button" onclick="changeContent('一つ目のコンテンツ１行目<br>一つ目のコンテンツ２行目<br>一つ目のコンテンツ３行目<br>')">
一つ目
</div>
<div class="button" onclick="changeContent('二つ目のコンテンツ１行目<br>二つ目のコンテンツ２行目<br>二つ目のコンテンツ３行目<br>')">
二つ目
</div>
<div class="button" onclick="changeContent('三つ目のコンテンツ１行目<br>三つ目のコンテンツ２行目<br>三つ目のコンテンツ３行目<br>')">
三つ目
</div>
<div class="button" onclick="changeContent('四つ目のコンテンツ１行目<br>四つ目のコンテンツ２行目<br>四つ目のコンテンツ３行目<br>')">
四つ目
</div>
</div>
<script>
function changeContent(newContent) {
   document.getElementById('content').innerHTML = newContent;
   document.getElementById('content-container').scrollTop = 0; // スクロール位置をリセット
}
</script>
</body>
</html>

このブログを検索

htmlソースメモ

iframeを使わずにコンテンツを切り替える

コメント

コメントを投稿