0

HTML ウィジェット、つまり他のページに含めることができる HTML コンテンツがあります。したがって、コンテンツがドメイン A からのもので、ドメイン B のページにドメイン A のウィジェットが含まれているとします。ドメイン B のページにクロスドメイン コンテンツを含めるには 2 つの方法があります。

注: ウィジェットには、データの視覚化など、いくつかの図が表示されます。

バリアント 1:

iFrame の使用。

<iframe src="domain_A_url_to_widget" width="200" height="400" name="foreignWidget">
  <p>no Browser support</p>
</iframe>

バリアント 2:

非同期で JavaScript を使用する。

<script type="text/javascript">
  (function(d){
    var f = d.getElementsByTagName('SCRIPT')[0],
        p = d.createElement('SCRIPT');
    p.type = 'text/javascript';
    p.async = true;
    p.src = '//domainA.com/js/widget.js';
    f.parentNode.insertBefore(p, f);
  })(document);
</script>

1. 両方のバリアントの長所と短所は何ですか?

2. バリアント 2 で JQuery と CSS を使用する可能性はありますか?

3. ウィジェットが ajax を使用してコンテンツをロードする場合、ユーザーは両方のバリアント イベントでウィジェットを操作できますか?

4

2 に答える 2

1

iframe は、サンドボックス化された環境を作成します。

利点: メイン ページ (スタイルなど) と競合するリスクがありません。

欠点: クロスドメインの制限により、iframe のコンテンツがメイン ページとやり取りするのが非常に困難です。

例:

  • オプション 1 は、広告または天気ウィジェットの場合に適しています
  • オプション 2 は、メイン ページでキーワードを強調表示するウィジェットの方が簡単です。

もちろん、バリアント 2 で jQuery を使用することもできます (覚えておいてください: jQuery は単なる JavaScript コードの集まりです)。css も使用できます。リンクまたはスタイル タグを介してロードします (スクリプト タグを介してスクリプトをロードしたのと同じ方法)。

于 2013-10-15T16:34:43.730 に答える
1

主な違いは、のコンテンツiframeが事実上独自のページであるのに対し、JavaScript を介して HTML を取り込むと、元のページの DOM の一部になることです。あなたがそれを「ウィジェット」と呼んでいるように、これはあなたが追加したい元のページのコンポーネントのようなものだと思いますiframe.の為に。

于 2013-10-15T16:08:30.727 に答える