HTMLだけ(iframe)で別ページを表示させる方法

HTMLだけ(iframe)で別ページを表示させる方法
この記事は約2分で読めます。
広告

別ページを、このページ内にHTMLだけで取得する方法のご紹介です。
自分は別ページの情報を取得するのは、phpの役目と思っていました。が、
「iframe」で取得できることを最近知って驚いたので記事にしました。

「iframe」で別ページを表示してみよう!

見て欲しいですこれ!
ちょっと興奮冷めやらない。

この超技術っぽいものが、「iframe」タグにURLを入れるだけで出来ちゃうんです。
簡単すぎますが一応ソースを載せておきます。

<iframe src="ここに取得したいページのURLを記述"></iframe>

これだけで、別ページを表示できるなんて驚きでした。

ここで少し気になることを思いました。

現在のこのブログページを表示したらiframe表示の無限ループになるかも…..

つまり

この記事のiframeでこの記事を表示して、更にその中の記事にiframeでこの記事を表示して、更にその中に記事のiframeでこの記事を表示して………

結果は?


「iframe」を使って表示したページの中のiframeは機能しませんでした。

少しがっかりです。

さらに、「iframe」で表示したページにCSSでスタイルを上書きしようとしても聞かず、
javascriptも効きませんでした。

まとめ

「iframe」で表示したページは、ちょっとスゴイ感じがするけれど、
CSSやjavascriptでは一切手を加えらず、その中の「iframe」も機能しません。
できないことを分かったうえで、利用するとかなり面白い機能だと思います。

勉強になりました。

エンデ・バタローをフォローする
HTMLサイト制作

埼玉県北本市に越してきて2年と少しになります。以前は東京都の京王線沿線に、その前は神戸の三宮、さらにその前は名古屋の八事霊園近くに住んでいました。

怖い話が大好きで、ネット怪談、ホラー小説、心霊Youtuber(オウマガドキch、ゾゾゾ)を寝る前のお供にしてます。

フロントエンドエンジニアとして9年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました