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コード

推薦する

ReactRouterの実装

ReactRouterの実装ReactRouterはReactのコアコンポーネントです。主にReac...

CSS の新機能には、コントロールページの再描画と再配置の問題が含まれています

新しい CSS プロパティ contain を紹介する前に、読者はページの再描画と再配置が何であるか...

ウェブサイトのパフォーマンスを向上させるために画像を最適化する方法

目次概要画像圧縮とはJPEG/JPG JPGの利点JPGの使用シナリオJPGの欠点MozJPEG を...

MySQL 8.0.20 winx64 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.20 winx64 のインストールと設定方法を次のように説明します...

MYSQL 演算子の概要

目次1. 算術演算子2. 比較演算子3. 論理演算子4. ビット演算子5. 演算子の優先順位1. 算...

JavaScript における async と await の使い方とメソッド

JS の async 関数と await キーワード 関数ヘルワールド() { 「こんにちは!美しい...

Linux システムでの nginx サーバーのインストールと負荷分散構成の詳細な説明

nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバー、メール プ...

WeChatミニプログラム抽選コンポーネントの使い方

WeChatコンポーネントの形式で提供されます。コンポーネント内部ではasync/awaitが使用さ...

docker ベースで Prometheus+Grafana を構築する手順の詳細説明

1. プロメテウスの紹介Prometheus は、もともと SoundCloud によって開発された...

Mysql で期間の交差をクエリする方法

MySQLクエリ期間の交差使用シナリオデータベース テーブルには、starttime と endti...

Windows で MySQL マスター スレーブ レプリケーションを構成する方法

MySQL マスター/スレーブ レプリケーションを使用すると、1 つのデータベース (マスター デー...

ウェブレスポンシブレイアウトにおけるiframe適応の方法

問題<br />レスポンシブ レイアウトでは、iframe 要素に注意する必要があります...

docker-compose を使用して Apollo カスタム環境をデプロイする詳細なチュートリアル

目次アポロ コンフィギュレーション センターとは何ですか?アポロの特徴クライアントアーキテクチャアー...

Centos Docker ブリッジ モードでホスト Redis サービスにアクセスできないというトラブルシューティングの経験

背景:以前、コンテナ内のホストが提供する Redis サービスにアクセスする必要があるプロジェクトを...

Reactは感情を使ってCSSコードを書く

目次導入:感情のインストール:一般的な CSS コンポーネントを追加します。既存のコンポーネントにス...