HTML ファイルにファイルの内容を含める方法の概要

HTML ファイルにファイルの内容を含める方法の概要

フォーラムでは、ネットユーザーから「HTML ファイル内の別の HTML ファイルの内容を読み取ることはできますか?」という質問がよく寄せられます。答えはイエスです。方法は複数あります。以前は、iframe のみを使用して参照していましたが、後に他のいくつかの方法を見つけました。今日は、これらの方法をまとめて、参考として紹介します。3 番目の方法の方が良いと思います。

HTMLファイル内に他のHTMLファイルを導入するいくつかの方法

1.IFrameの紹介、次のコードを見てください


コードをコピー
コードは次のとおりです。

<IFRAME NAME="content_frame" 幅=100% 高さ=40 マージン幅=0 マージン高さ=0 SRC="import.htm" ></IFRAME>

外部からインポートされたファイルが表示されますが、それを囲む外枠のようなものが見つかります。


コードをコピー
コードは次のとおりです。

<iframe name="content_frame" marginwidth=0 marginheight=0 width=100% height=40 src="import.htm" frameborder=0></iframe>

しかし、まだ問題があります。それは、背景色が異なることです。インポートしたファイルimport.htmで同じ背景色を使用することもできますが、

IE5.5 を使用している場合は、透明色に関するこの記事をお読みください。スクロール バーのない長いファイルをインポートする場合は、import.htm の本文に以下を追加します。

スクロールを入力=いいえ

*デメリット: ナビゲーションジャンプができない、iframe内でジャンプできない、コンテンツが重なり合う

2.<object> メソッド


コードをコピー
コードは次のとおりです。

<object style="border:0px" type="text/x-scriptlet" data="import.htm" width=100% height=30></object>

オブジェクト タグ — 埋め込まれたオブジェクト (画像、メディア、コードなど) を定義します。

* 標準的な Web デザインの概念に適合しておらず、標準的な Web デザインでは放棄されています。

3.動作ダウンロード方法


コードをコピー
コードは次のとおりです。

<span id=showインポート></span>
<IE:ダウンロード ID="oDownload" STYLE="behavior:url(#default#download)" />
<スクリプト>
関数 onDownloadDone(downDate){
showImport.innerHTML=ダウン日付
}
oDownload.startDownload('import.htm',onDownloadDone)
</スクリプト>

<<:  Docker マイクロサービス用の ETCD クラスターの構築に関する詳細なチュートリアル

>>:  流れと動的なライン効果を実現する純粋なCSSコード

推薦する

JavaScript オブジェクト指向クラス継承ケースの説明

1. オブジェクト指向のクラス継承これまでの章では、JavaScript のオブジェクト モデルがプ...

Linux で ss コマンドと zabbix を組み合わせてソケットを監視する方法の詳細な説明

目次序文1. ssコマンド2. Zabbix監視マシンの全体的なソケットステータス2.1. スクリプ...

MySQL 8.0.22 のダウンロード、インストール、設定方法のグラフィックチュートリアル

参考までにMySQL 8.0.22をダウンロードしてインストールしてください。具体的な内容は次のとお...

MySQL 8.0.21.0 コミュニティ エディションのインストール チュートリアル (詳細な図解)

1. MySQLをダウンロードするMySQL 公式 Web サイトにログインし、MSI インストー...

Zabbix を使用して Oracle データベースを監視する方法の詳細な説明

1. 概要Zabbix は非常に強力で、最も広く使用されているオープンソースの監視ソフトウェアです。...

Vue+Element+Springboot画像アップロードの実装例

最近、たまたま vue+springboot のフロントエンドとバックエンドの分離プロジェクトに触れ...

JavaScript はパスワードボックスの入力検証を実装します

サーバーの負荷を軽減するために、ユーザーが入力するときにフロントエンドページで簡単な検証を実行する必...

Java は Excel から MySQL にデータをインポートします

実際の業務では、Excel からデータベースにデータをインポートする必要がある場合があります。データ...

vue+elementUI で埋め込みテーブルを実装する方法の例

大学 4 年生のときのインターンシップ中に、表内のデータの番号をクリックすると、そのデータの下に新し...

MacにHomebrewをインストールする際の注意点

最近、Xiao Ming は新しい Mac を購入し、独自のブログ Web サイトを構築したいと考え...

Vueのv-onパラメータの問題についてお話しましょう

Vue での v-on:clock の使用現在、vue.js フレームワークを学習しています。後で参...

CentOS 6.5 i386 インストール MySQL 5.7.18 詳細チュートリアル

ほとんどの人はMySQLをコンパイルしてシステムディレクトリに置きますが、私のやり方はコンパイルした...

アコーディオンセカンダリメニューを実装するためのjQueryプラグイン

この記事では、jQueryプラグインを使用してアコーディオンセカンダリメニューを作成します。具体的な...

Typescriptを使用してローカルストレージをカプセル化する方法

目次序文ローカルストレージの使用シナリオ使用上の問題解決機能性有効期限を追加データ暗号化を追加する命...

CSS3実践手法のまとめ(推奨)

1. 丸い境界線: CSSコードコンテンツをクリップボードにコピー境界線の半径: 4px ; 2....