0

index.htmlを含むファイルで構成されるWebアプリケーションがあります<iframe>。ファイルは、のindex.htmlさまざまなページをロードします<iframe>。これらの各ページには、独自の独立したJavascriptとCSSがあります。

これまでのところすべてが機能しています。

私は今、Ajax呼び出しを使用してこれらのページを<div>.htmlにロードするのではなく、index.htmlのにロードすることを考えてい<iframe>ます。私はいくつかのテストを行いましたが、それは可能ですが、私が心配している問題があります。私はこのテクニックに慣れていないので、ここの専門家が知識を共有できるのではないかと思いました。

問題#1:

<div>これらのページをファイル内のに直接ロードするindex.htmlと、新しいページはそれ自体と同じDOMにロードされますindex.htmlindex.htmlしたがって、要素クラスとページのIDの間に競合が発生する可能性があり、たとえばページからホスティングすると、ファイルとページの$("#foo").hide();クラスを持つ要素が実際に非表示になります。ページコードをある種のサンドボックスに入れて、影響を与えないようにする方法はありますか?fooindex.htmlindex.html

問題#2:

ページを削除するとき(おそらく別のページに置き換えるとき)、そのコードの一部がまだメモリに残っているリスクがあります(ここで説明します)。この影響を防ぐ方法はありますか?もちろん、最初の問題に対する肯定的な答えはこれをカバーします。なぜなら、ページがサンドボックスで実行されている場合、ページをアンロードするとそのjavascriptコードもアンロードされるはずだからです。

問題#3:

このページは、独自の要素を含む完全なHTML<head>ファイルです<body><title>つまり、ホスティングindex.htmlファイルのCCSルールの影響も受けます。これらの負の副作用をどのように防ぐことができますか?

ページ全体をリロードする必要のないページナビゲーションシステムは、多くの最新のWebサイトで一般的なインタラクションメカニズムのようです。これらの副作用なしに(なしで<iframe>)ページを動的にロードするにはどうすればよいですか?

4

3 に答える 3

1

副作用のあるページを安全にページに挿入することはできません。

グローバルな状態に依存しないスタイルでコードを書く必要がありますが、これは大変な作業だと思います。

原則として、これは次のことを意味します。

  • JavaScriptコードにグローバル変数はありません
  • タグ名ではなく、クラス名または一意のIDを使用してすべてのコンテンツをスタイリングします。
  • テンプレート言語の形式のコードを介して、または手動でこれを行うことにより、クラス名とIDの一意性を維持するのはユーザーの責任です。

例を挙げると、内部divにIDを"page-container"指定し、ページのすべてのcssルールを変更して、すべてのルールの前に#page-containerセレクターを付けることができます。

これに失敗すると、Webアプリフレームワークは通常、単一ページのWebアプリケーションを作成するために使用され、言及した問題を解決する能力を明確に示します。ただし、これを実現するには、既存のコードを大幅に再構築する必要があります。

于 2012-10-02T13:18:24.993 に答える
1

あなたが話していることは、シングルページアプリのように聞こえます。その場合、直面しているすべての問題に対処する多くの既存のフレームワークの 1 つを使用することをお勧めします。

いくつか存在しますが、これらはほんの一部です。

Knockout.js ( knockoutjs.com )

Ember.js ( emberjs.com )

于 2012-10-02T13:11:19.250 に答える
1

本格的な新しいフレームワーク (並行した回答で言及されています) への移行はやり過ぎかもしれないと判断する可能性があるため、いくつかの考慮事項を個別に考慮して回答を投稿しています。

問題#1:

新しいコンテンツをホスティング ページに直接ロードすると、サンドボックス化はできなくなります。ID 間の競合を防ぐ命名規則を作成する必要があります。たとえば、動的にロードされるフラグメントのすべての要素には、特定のプレフィックスを持つ ID が必要です。

問題#2:

ロード中に含まれていたすべての面でクリーンアップする責任があります。

問題#3:

独自の head、body、および title を持つ動的に読み込まれたフラグメントを div に配置することはお勧めできません。純粋なコンテンツをロードする必要があります。また、CSS スタイル (クラス) の命名規則を再度作成しない限り、ホスティング ページの CSS が新しいフラグメントに影響を与えないようにするオプションはありません。

于 2012-10-02T13:20:09.500 に答える