iframeをトーストに表示する方法
iframeをトーストに表示する方法を紹介します。このサンプルでは、「ページを表示」ボタンをクリックすると画面右下へトーストが表示され、その中にiframeで外部ページを表示します。通常のテキスト通知として使われるトーストへiframeを組み合わせることで、現在のページから移動せずに別ページの内容を確認できます。
操作マニュアル、案内ページ、関連ページ、外部サービスの埋め込み画面などを、必要なときだけ表示したい場合に利用できます。トーストにはiframeと閉じるボタンを配置し、利用者が「ページを表示」をクリックすると表示され、×ボタンをクリックすると非表示になります。常にiframeを画面へ表示しておく必要がないため、ページ内の表示スペースを抑えながら補足情報を案内できます。
HTMLでは表示するページのURL、タイトル、ボタンの文章を変更でき、CSSではトーストの横幅、高さ、余白、角丸、影、表示位置などを調整できます。JavaScriptでは表示ボタンと閉じるボタンによる開閉を行います。画面幅が狭い場合はトーストの横幅を自動で縮小するため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンをクリックすると、画面右下のトーストにページが表示されます。
「ページを表示」をクリックすると画面右下のトーストにページが表示されます。「×」をクリックするとトーストを閉じられます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>iframeをトーストに表示する方法</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- iframeトースト全体 -->
<div class="iframe-toast_wrap">
<!-- タイトル -->
<div class="iframe-toast_title">
iframeをトーストに表示
</div>
<!-- 説明文 -->
<p class="iframe-toast_text">
ボタンをクリックすると、画面右下のトーストにページが表示されます。
</p>
<!-- トーストを表示するボタン -->
<button
type="button"
class="iframe-toast_button"
data-iframe-toast-open="">
ページを表示
</button>
</div>
<!-- iframeを表示するトースト -->
<div class="iframe-toast_message" data-iframe-toast="">
<!-- トースト上部 -->
<div class="iframe-toast_header">
<!-- トーストタイトル -->
<div class="iframe-toast_heading">
サンプルページ
</div>
<!-- 閉じるボタン -->
<button
type="button"
class="iframe-toast_close"
data-iframe-toast-close=""
aria-label="閉じる">
×
</button>
</div>
<!-- iframe表示エリア -->
<div class="iframe-toast_frame">
<!--
【表示するページURLの設定方法】
YOUR_IFRAME_URL を、
iframeで表示したいページのURLへ置き換えてください。
例：
https://example.com/
iframeへの埋め込みを禁止しているWebサイトは
表示できない場合があります。
-->
<iframe
src="YOUR_IFRAME_URL"
title="サンプルページ">
</iframe>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。
HTMLで表示ボタン・トースト・iframeを配置し、CSSで画面右下に表示するトーストの見た目を整え、JavaScriptでトーストの表示と非表示を切り替えます。
iframeに表示するページは利用者自身で用意し、index.html内のYOUR_IFRAME_URLを表示したいページのURLへ置き換えて使用します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlには、「ページを表示」ボタン、画面右下へ表示するトースト、閉じるボタン、ページを読み込むiframeを記述しています。
iframeのsrcにあるYOUR_IFRAME_URLが、利用者自身で設定するページURLです。トースト内の「サンプルページ」というタイトルやボタンの文章も、このファイルで変更できます。
style.cssでは、サンプル全体の横幅や余白、ボタン、トーストの位置・サイズ・角丸・影、iframeの表示サイズなどを設定しています。また、画面幅640px以下でトーストの横幅やiframeの高さを変更するレスポンシブ設定も記述しています。
script.jsでは、「ページを表示」ボタンをクリックしたときにis-showクラスを追加してトーストを表示し、「×」をクリックしたときにクラスを削除してトーストを閉じます。
設置方法・使い方
まず、iframe内へ表示したいページのURLを用意します。index.htmlを開き、iframeのsrc="YOUR_IFRAME_URL"にあるYOUR_IFRAME_URLを、実際に表示したいページのURLへ置き換えてください。
例えば表示したいページのURLがhttps://example.com/の場合は、src="https://example.com/"のように設定します。ただし、Webサイト側でiframeへの埋め込みが禁止されている場合は、この方法ではページを表示できません。
URLを設定したら、index.html・style.css・script.jsを同じsampleフォルダへ配置し、sample/index.htmlをブラウザで開きます。「ページを表示」をクリックすると画面右下へトーストが表示され、「×」をクリックすると閉じます。
カスタマイズできる内容
index.htmlでは、YOUR_IFRAME_URLを変更することでiframeへ表示するページを変更できます。また、「iframeをトーストに表示」「ページを表示」「サンプルページ」などの表示文章も変更できます。
style.cssでは、backgroundやcolorで背景色・文字色、border-radiusで角丸、box-shadowで影を変更できます。rightとbottomを変更すると、画面右端・下端からトーストまでの間隔を調整できます。
数値調整
style.cssのmax-width:700px;は、最初に表示されるサンプル全体の最大横幅です。値を大きくすると横に広がり、小さくすると狭くなります。
width:min(460px,calc(100vw - 48px));の460pxは、トーストの最大横幅です。値を変更すると、PC表示時のトーストの横幅を調整できます。
right:24px;とbottom:24px;は、トーストを画面右端・下端から離す距離です。値を大きくすると画面端から離れます。
height:320px;は、PC表示時のiframe表示エリアの高さです。値を大きくすると表示領域が高くなり、小さくすると低くなります。
transition:.3s;は、トーストを表示・非表示にするときの切り替え時間です。値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
style.cssでは、トーストの横幅にcalc(100vw - 48px)を使用しているため、画面幅が狭い場合でも画面内へ収まるようになっています。iframeにもwidth:100%を指定し、トーストの横幅に合わせて表示されます。
また、@media (max-width:640px)を使用し、画面幅640px以下ではトーストを右端・下端から16pxの位置へ変更し、横幅をcalc(100vw - 32px)、iframe表示エリアの高さを260pxに変更します。スマートフォン・タブレット・PCの画面幅に合わせて利用できます。
コメント