index.html
を含むファイルで構成されるWebアプリケーションがあります<iframe>
。ファイルは、のindex.html
さまざまなページをロードします<iframe>
。これらの各ページには、独自の独立したJavascriptとCSSがあります。
これまでのところすべてが機能しています。
私は今、Ajax呼び出しを使用してこれらのページを<div>
.htmlにロードするのではなく、index.htmlのにロードすることを考えてい<iframe>
ます。私はいくつかのテストを行いましたが、それは可能ですが、私が心配している問題があります。私はこのテクニックに慣れていないので、ここの専門家が知識を共有できるのではないかと思いました。
問題#1:
<div>
これらのページをファイル内のに直接ロードするindex.html
と、新しいページはそれ自体と同じDOMにロードされますindex.html
。index.html
したがって、要素クラスとページのIDの間に競合が発生する可能性があり、たとえばページからホスティングすると、ファイルとページの$("#foo").hide();
クラスを持つ要素が実際に非表示になります。ページコードをある種のサンドボックスに入れて、影響を与えないようにする方法はありますか?foo
index.html
index.html
問題#2:
ページを削除するとき(おそらく別のページに置き換えるとき)、そのコードの一部がまだメモリに残っているリスクがあります(ここで説明します)。この影響を防ぐ方法はありますか?もちろん、最初の問題に対する肯定的な答えはこれをカバーします。なぜなら、ページがサンドボックスで実行されている場合、ページをアンロードするとそのjavascriptコードもアンロードされるはずだからです。
問題#3:
このページは、独自の要素を含む完全なHTML<head>
ファイルです<body>
。<title>
つまり、ホスティングindex.html
ファイルのCCSルールの影響も受けます。これらの負の副作用をどのように防ぐことができますか?
ページ全体をリロードする必要のないページナビゲーションシステムは、多くの最新のWebサイトで一般的なインタラクションメカニズムのようです。これらの副作用なしに(なしで<iframe>
)ページを動的にロードするにはどうすればよいですか?