【Vue】iframeタグはそのまま埋め込む

  • 投稿日
  • 更新日
  • 著者 tanatiyo
  • カテゴリー Vue.js

以下、自分用の作業メモです。

<iframe> タグを直接使用する

Vue.js では、<iframe> タグを直接使用することができます。Vue.js は HTML の一部であり、通常の HTML 要素を使うことができます。以下は、Vue.js コンポーネント内で <iframe> を使用する例です。

<template>
  <div>
    <iframe src="https://example.com" width="600" height="400"></iframe>
  </div>
</template>

<script>
export default {
  // コンポーネントのロジックなど
};
</script>

このようにして、通常の HTML と同様に <iframe> タグを Vue.js コンポーネント内で使用できます。もし <iframe> タグがうまく動作しない場合、問題は通常 Vue.js ではなく、埋め込まれているコンテンツや他のコードにある可能性があります。その場合、iframe 内のコンテンツや外部スクリプトに問題がないか確認してください。

src先はどういったものがある？

<iframe> タグの src 属性に指定するものは、一般的にWebページのURLです。つまり、外部のウェブサイトや、同じサイト内の異なるページのURLを指定します。以下は一般的な使用例です。

<iframe src="https://example.com"></iframe>

このようにすることで、<iframe> タグ内に指定したURLのコンテンツが表示されます。このURLは、HTML ページ、動画、画像、PDF ファイル、または他のコンテンツ形式を指すことができます。例えば、YouTubeの動画や、Google ドキュメント内のファイル、外部サイトなどです。

以下は一般的な例です。

  1. 外部ウェブサイト:
   <iframe src="https://www.youtube.com"></iframe>
  1. 同じサイト内の別ページ:
   <iframe src="/other-page"></iframe>
  1. PDF ファイル:
   <iframe src="document.pdf"></iframe>
  1. テキストファイル:
   <iframe src="textfile.txt"></iframe>

注意: クロスオリジンのセキュリティポリシーにより、異なるオリジン（ドメイン）からのページは、特別な許可がない限り <iframe> で表示できません。

この記事を書いた人

tanatiyo

記事一覧