ajaxではなくiframeを使用する必要がありますか？

Question

私たちはあなたがページをブラウズしている間（サウンドクラウドのようなもの）、再生し続けるべきオーディオプレーヤーを備えたDrupalサイトを構築しています。

現在、読み込んでいます<a>のサイトをajaxでクリックし、htmlをページに挿入し、history.jsを使用して場所を操作します。

主要な欠点ががあります：

新しくロードされたページがそれに異なるCSSやJSを持っているかもしれないので、私たちはAJAXの応答テキスト（醜い正規表現）に現在のスクリプト、スタイルとリンク要素を比較する必要があります新しい要素、まだ存在しない要素を追加するだけです。そうすることによって、別のページをロードすることは、実行されたスクリプトを削除/削除/元に戻すことはありません。これはパフォーマンス上の問題になります（マークアップに対する正規表現はとにかくです）。インラインフレームを使用して

はこれと他の問題を解決することがあります。あなたが最初のサイト上のリンクをクリックすると

、ページのコンテンツは、単にページをロードするのiframeに置き換えられています。オーディオプレーヤーは元のDOMにあります。 e。 iframeの外側にあります。 iframe内のリンクをクリックすると、ヒストリAPI内でキャッチして使用することができます。

だから私は思ったことはありませんでした：私はiframeを使用する方が良い選択肢かもしれないと思います。

PS：私の主な問題は、ウェブサイトのさまざまなページには異なるスクリプトがあり、スタイルは実際には問題ではないということです。 1つの巨大な静的なjsとcssのWebサイト全体があった場合、私は問題を抱えていませんでした。

更新

iframeソリューションは、iOS以外では、正常に動作します。 iframeは地獄のようにバギーです。それでも、iframeソリューションを利用していると思います。

Answer 1

私は言うだろう...それは簡単で、愚かなままにしておきます。 iframeソリューションに進むと、私はそれがあなたの魂の一部を殺していることは知っていますが、それはあなたの問題に対する最も簡単な解決策であり、

KISS。

Answer 2

奇妙なことをやってみることもできます。

まず、windowオブジェクトと新しいオブジェクトを比較して、すべての追加プロパティ（here's an example）を削除することができます。 document,、Array.prototypeなどのスクリプトと同じように拡張することができます。そうすることで、定義されたものの大半を取り除くことができ、ある時点でガーベジコレクターがそれを落とすことになります。

第2に、すべてのイベントリスナーを削除する必要があります。これは、addEventListenerなど（refer to this question for example）を再定義することによって可能です。

第3に、間隔とタイムアウトについては、以前のものと同様の方法（ラップsetTimeoutなど）（found it here）を使用して処理することができます。

もちろん、ページ内で実行されているスクリプトに応じて、多くのものが残っています。だから、曲が再生されていない間にユーザーがリンクをクリックしたときにページをリフレッシュすることができます（トラック間の切り替えなど）。見る？やるべきことがたくさんあり、これは何も与えないかもしれません。だから、これらの理論のすべての後、私はiframeを使用するだろう。たとえば、サイトのスクリプトの一部が（2番目と3番目のように）js関数をラップすると、Ajaxingはその関数のラップコールを重ねることになりますが、これは本当に悪いことです。

Answer 3

iframeを使用しない理由はありません。私はあなたのウェブサイト内のページを埋め込むためにiframeを使用するといいと思います。それがiframeのためのものです。

しかし、以前はiframeがSEOに悪いとされていましたが、今日のWebクローラは通常、ウェブサイトとiframeコンテンツの間を移動できます。

iframeを使用すると、「ugly regex」ではなく、より簡単で簡単に使用できます。なぜそれを単純にしないの？ KISS principle

Answer 4

私はいくつかの質問をし、あなたが気にしない場合は、この回答を編集したいと思います。 この理由は、このプロジェクトを開始したときにあなたが不都合な建築上の決定を下したと思います。あなたの説明から、タグがクリックされたときに静的なHTMLページを読み込んでいると思いますが、そうでなければ、あなたのバックエンド技術は何ですか？

ロジックをフロントエンドとバックエンドに分け、フロントエンドをモデル、ビュー、コントローラに分離するのが理想的です。必ずしもフレームワークを使用する必要はありません。そうすることで（またはMVVMと同じように）データをどのようにロードするか、HTMLを直接注入したり、バックエンドの技術を使ってフロントエンドにjsonやxmlを送信したり、自分のdomを送信するのではなく、フロントエンドにあるテンプレートにhtmlを表示するこれは不必要に遅くて高価になる。バックエンドがあるときは、ブラックボックス環境でパーシスタンス層を構築し、シンプルなAPIを介してマニピュレータメソッドを呼び出すと、よりクリーンで高速に実行できるようになります。そのようにして、モバイルネイティブアプリを構築するときには、APIレイヤーを再利用するだけです。

cssとjsの正規表現の比較は、不正なハッキングのように聞こえますが、iframeを使用する方が適していると思いますが、もう少し詳しい情報が必要ですより広い視点。

UPDATE：

ページが異なるCSSを有していてもよく、なぜ私は理解しますが、私はあなたの音楽プレーヤーのJSは、それらに接続された異なるメディアIDと同じソースでなければなりませんと仮定します。このセットアップを仮定すると、私が想定しているDrupalデータベースでは、標準のidインデックスエントリとcreated_at、modified_atなどとは別に、あなたの "音楽プレーヤー"ページ用のカスタムテーブルを作成し、プレイ可能なソース用に1つのフィールドを持ちます。

実際のプレーヤーを作成するDrupalフロントエンドテンプレートでは、このソースIDをデータベースから書き込みます。あなたの音楽ページ用のページが1つあります。 CSSの場合は、すべてのファイルを1つのファイルに保存してください。おそらくSASSやLESSのようなものを使用してCSSファイルをコンパイルし、すべてをもっと整理してください。

要点では、drupal側にPHPを埋め込みJSで記述し、DBからフロントエンドにPHP変数を渡してIDを渡すようにしてください。 JSと一緒に読み込まれると、ページIDが表示されます。これが役立つことを願って、あなたに多くの質問があれば教えてください。これと他の問題解決することがありインラインフレームを使用して

Answer 5

あなたが言ったように、

：あなたが最初のサイト上のリンクをクリックすると は、ページのコンテンツは、単にページをロードするのiframeに置き換えられています。オーディオプレーヤーは元のDOMにあります。 e。 iframeの外側にあります。iframe内のリンクをクリックすると、ヒストリAPI内でキャッチして使用することができます。

ajaxと同様のことができます。置き換える必要があるすべてのコンテンツを1つのコンテナに入れ、Ajaxレスポンスに基づいてそのコンテナのコンテンツを置き換えます。そのコンテナの外にあるコンテンツには触れないでください。私はあなたのパフォーマンスの問題も解決すると思います。