2009-06-23 7 views
1

私はちょうどこれについての説明を探しています。サイト間でウェブコントロールを埋め込む - IFrame/Javascriptを使用する

私は小さなウィジェットを持っているといいでしょう。ウィジェットはデータを取得し、クライアントサイドの検証や他のAJAX-yナンセンスを行い、ボタンをクリックすると別のページに移動します。

これを埋め込み可能なコンポーネントにしたい場合、他の人がこれを自分のサイトに貼り付けることができます。基本的にiframe内にカプセル化することに限定されていますか?

iframeでできること、できないことに制限がありますか?

たとえば、別のページに移動するボタンをクリックすると、iframeにコンテンツが読み込まれますか?だから、iframeの外に存在する必要がありますか?

最後に、ユーザーがクリックしたボタンが、クレジットカードの詳細を確認するためにhttpsページに移動した場合、特定のセキュリティには何も起こりません。

編集:私が取り組んでいることの例として、ページにGoogleマップまたはマルチマップを埋め込むことについて考えてみましょう。

EDIT編集:さて、私はそれを得ると思います。

2つの方法があります。

IFrameに1つ埋め込みますが、これには制限があります。

2つ - Javascript APIを作成し、これにリンクするように消費者に依頼してください。しかし、これは消費者とクリエイターにとってははるかに複雑です。

私はそれを得ましたか?

おかげで ダンカン

+1

オプションは必ずしも消費者にとってより複雑なものではありません。例については、http://stackoverflow.com/users/flairを参照してください。 – Stobor

答えて

2

両方の方法にプラスの点があります。私は、私がソースを信頼できると確信していない限り、私のページに別の人のJavascriptを使用しませんでした。ページ上のすべての入力ボックスの値を送信する悪意のあるスクリプトを作成することは難しくありません。ページの内容にアクセスする必要がない場合は、iframeを使用するのが最適なオプションです。、あなたは離れてホスティングページからナビゲートしていることから、このような状況で

<a href="http://some.url/with/a/page" target="_top">This is a link</a> 
<form action="http://some.url/with/a/page" target="_parent"><button type="submit">This is a button</button></form> 

ボタンやリンクがそうのように、ターゲットの属性を使用して上部または親フレームをナビゲートするために「言われ」することができます同じ起源政策は適用されない。

同様の状況では、ウィジェットは一般にページに配置されたiframeです。 iGoogleとWindows Liveガジェット(私の知る限り)はiframeでホストされています。

1

私はあなたが可能な場合はインラインフレームを使用してから離れて取得したいと思います。これらは便利な場合もありますが、ナビゲーションやブックマークに問題が発生する可能性があります。一般的に、iframe以外のやり方をすることができれば、より良い方法です。

AJAXリファレンスを作成すると、スクリプトタグで行う必要があるJavaScriptスクリプトのポインタが最適な方法でしょう。これが、Google AnalyticsやGoogle AdsなどのGoogleの埋め込み方法です。また、あなたがホストしているURLから引き出すことができるという利点もあります。したがって、コードを更新して、これを使用しているすべてのWebページでアクティブなvoilaを更新できます。 (Googleは通常、バージョン番号も使用しているため、変更を行ったときに全員が切り替わることはありません)。

クレジットカードのシナリオを再実行すると、Javascriptは「同じ発信元ポリシー」によってバインドされます。説明を明確にするには、http://en.wikipedia.org/wiki/Same_origin_policy

を追加してください。追加:Googleマップは、誰がコードを使用しているかを明示的に識別するユーザー/サイトキーなどのいくつかの注意点と同じ方法で動作します。

+0

クール、私はここで少し高密度であることを知っていますが、(非常に!)高水準の概念の概要(ページ1はそのようなものを介してページ2に話します)を歩くことができたら、本当に感謝します! – Duncan

+0

また、クレジットカードのシナリオを考えてみると、私はJSONPを使ってこれを回避することができます - http://www.zackgrossbart.com/hackito/jsonp-sop/私は思います! – Duncan

2

AJAXを使用している場合は、C#またはJavaまたはいくつかのOO言語で書かれたサーバーがあると仮定します。 どの言語が構文だけが変化するかは実際問題ではありません。

どちらの方法でも、iFrameメソッドに対してアドバイスします。 iFrameでHttp with Https(またはその逆)のような穴や問題が多すぎると、混在したコンテンツの警告が表示されます。

あなたは何をしていますか?

  1. リモートサイトへのサーバー・サイド・コール
  2. あなたは
  3. ディスプレイには、ユーザー

にコンテンツを返さ必要なものAJAXを介してサーバ

  • 戻るに適切に応答を解析してくださいあなたはAJAXを行う方法を知っているだけで、リモートサイトにサーバー側の呼び出しを追加します。

    のJava:

    URL url = new URL("http://www.WEBSITE.com"); 
    URLConnection conn = url.openConnection(); 
    

    または

    のC#:

    HttpWebRequest req = (HttpWebRequest)HttpWebRequest.Create("http://www.WEBSITE.com"); 
    WebResponse res = req.GetResponse(); 
    
  • 0

    jQueryのようなものを使用してに見ては、あなたのコンポーネントの "プラグイン" を作成し、ただ一つの方法、およびちょうどあなたがこれを使うために他の人々とコンポーネントを共有したいのであれば、できることの一つです。

    関連する問題