2

iframe 内にこのファイル アップローダがありますが、それを別の Web サイトに埋め込むと許可されず、Firebug は次のエラーを表示します。

< http://www.mywebsite.com > が < http://www.myotherwebsite.com > からプロパティ Window.document を取得するためのアクセス許可が拒否されました。

この行に来る：

$('iframe', top.document).css('border', '1px green solid');

アップロードが完了したら、ボーダーで iframe のスタイルを設定しようとしています。

私は他の質問を見ました。解決策はサーバー側のプロキシを作成することであり、それが機能するようにプロキシを作成し、jQuery を実行できるようにする方法がわかりません。

乾杯。

バウンティが追加されました。

4

8 に答える 8

5

サーバー側のプロキシは、この問題を解決するのに役立つ場合があります。ブラウザーは、同じドメインを使用してそのサーバーに対してのみ AJAX 呼び出しを行うことができますが、サーバー自体は制限なしで他のサーバーに対して呼び出しを行うことができます。

Yahoo の Weather API に対して AJAX リクエストを行う必要があるとします。同じドメイン ポリシーにより、www.example.com から www.yahoo.com へのリクエストを作成できないため、回避策として、最初にサーバーに呼び出しを行い、次にサーバーから Yahoo へのリクエストを作成します。以下は、まさにそれを行うプロキシの例です。

リクエスト: http://www.example.com/weather.php?zip=97015

<? // Yahoo Weather proxy

$zip_code = $_REQUEST["zip"];

// default to Portland, OR for testing
if($zip_code == null || $zip_code == '')
    $zip_code = "97206";

// delegate request to the other server, circumventing the same-domain policy.
$request = "http://weather.yahooapis.com/forecastrss?p=".$zip_code;

$response = file_get_contents($request);

// Retrieve HTTP status code
list($version,$status_code,$msg) = explode(' ',$http_response_header[0], 3);


// Check the HTTP Status code
switch($status_code) {
    case 200:
            // Success
            break;
    case 503:
            die('Your call to Yahoo Web Services failed and returned an HTTP status of 503. That means: Service unavailable. An internal problem prevented us from returning data to you.');
            break;
    case 403:
            die('Your call to Yahoo Web Services failed and returned an HTTP status of 403. That means: Forbidden. You do not have permission to access this resource, or are over your rate limit.');
            break;
    case 400:
            // You may want to fall through here and read the specific XML error
            die('Your call to Yahoo Web Services failed and returned an HTTP status of 400. That means:  Bad request. The parameters passed to the service did not match as expected. The exact error is returned in the XML response.');
            break;
    default:
            die('Your call to Yahoo Web Services returned an unexpected HTTP status of:' . $status_code);
}


echo $response;
?>

今、あなたの場合、ファイルのアップロードが完了したときに iframe のスタイルを設定したいと考えています。簡単な解決策は、親ドキュメントのサーバーをポーリングし、ファイルが見つかるまでプロキシにアップロード サーバーをポーリングさせることです。ファイルが見つかったら、応答を使用して、iframe スタイルを変更する JQuery コードを呼び出すことができます。

プロキシの概念が機能するためには、アップローダを埋め込む各 Web サイトに、アップロード サイトでファイルの存在を確認し、その応答をクライアントに返す独自の同じドメイン プロキシを展開する必要があります。

親ドキュメントは、アップロードされるファイルの名前を何らかの形で知る必要もあります。ドメイン ポリシーが同じであるため、ファイル名を特定できない場合があり、プロキシを使用してファイルの存在を確認する際に問題が発生します。何をチェックしているのか、どうやってわかりますか？

于 2011-02-07T08:08:05.667 に答える
0

この問題にはeasyXDMを簡単に適用できます。応答データを使用してクロスドメインアップロードを行う方法のデモもあります。

このブログ投稿では、その背後にある基本についても説明します。

于 2011-02-06T23:24:29.403 に答える
0

あなたはこれを行うことができます：

$("iframe").css('border', '1px green solid');アップロードが完了すると

ここでフィドルの例を作成しました：

http://jsfiddle.net/Mutant_Tractor/erAdS/8/

于 2011-02-06T16:45:09.603 に答える
0

サーバー側プロキシ

アパッチ構成

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

ProxyRequests Off

<Proxy *>
Order deny,allow
Allow from all
</Proxy>

ProxyPass /foo http://mywebsite.com/
ProxyPassReverse /foo http://mywebsite.com/

これが役立つことを願っています

したがって、www.bar.com から www.bar.com/foo へのリクエストを作成すると、Apache は www.mywebsite.com に渡されます。

于 2011-02-06T14:07:56.917 に答える
0

アップロード サーバーとアップローダを展開している Web サイトを含むすべての Web サイトを所有している場合は、簡単な DNS トリックをいくつか使用することで解決できる可能性があります。

  • たとえば、アップロード サーバーのドメインが upload.example.com.
  • あなたのサーバーがwww.example.com.

上記の場合、document.domain プロパティを設定することでクロス サイト スクリプティングを有効にできます。

document.domain = "example.com";

これにより、www.example.com が upload.example.com iframe と通信できるようになります。

サブドメイン間で通信する機能は、Web サイトを所有していると仮定して、他の Web サーバー間の通信に役立ちます。

ドメインが違う場合はどうする？

次のように仮定します。

  • upload.example.comはアップロード サーバーです。
  • www.domain.comアップローダ iframe を含む親ドキュメントである Web サイトです。

繰り返しになりますが、これらのドメイン名の両方を所有しているか、少なくとも設定にアクセスできると想定しています。サブドメインでのクロスサイト スクリプティングの有効化に関する上記の知識を使用して、いくつかの DNS トリックを使用できます。

  • DNS マネージャーで、 の CNAME を作成し、upload.domain.comそのサブドメインが と同じサーバーを指すようにしますupload.example.com。完了すると、両方upload.example.comとupload.domain.com両方が同じサーバーと PHP アプリケーションを指します。
  • にwww.domain.com埋め込んupload.domain.comで設定document.domain="domain.com";
  • でwww.example.com、埋め込みupload.example.com＆設定document.domain="example.com";

どちらの場合も、Web サイトのドメイン名がアップローダーのドメイン名と一致し、document.domain プロパティがドメインと一致することがわかります。

を呼び出して$('iframe', top.document).css('border', '1px green solid');も、権限エラーは発生しません。

要約すると、アップローダの iframe を埋め込む Web サイトが何であれ、Web サイトのドメインに一致するそのアップローダの CNAME エイリアスを作成したこと、および document.domain プロパティがアップローダと Web サイトの両方で設定されていることを確認してください。 .

iframe でプロパティを使用してdocument.referrer、親ドキュメントのコンテキストを動的に決定し、ドメイン プロパティを何に設定するかを決定できます。

// uploader file code

// array split by period to get domain ["http://uploader", "example", "com/iframe/uploadFile", "php"]
var domainSplit = document.referrer.split(".");  

// the 2nd place in the array is the domain.  You may need to improve this for deeper subdomains
document.domain = domainSplit[1];

注: Apache と PHP を使用していると仮定しています。upload.XYZ.comその場合、すべてのドメインに対して ServerAlias エントリを作成できます。別のサーバーを使用している場合、ほとんどのサーバーには ServerAlias を設定する方法があります。

于 2011-02-07T08:31:46.067 に答える
0

こんにちは、先日、名前を使用して iFrame と iFrame をロードするウィンドウの間でやり取りする方法を見つけようとしているときに、ある記事に出会いました。

http://softwareas.com/cross-domain-communication-with-iframes

デモ - http://ajaxify.com/run/crossframe/duo/

// site 1 code
<iframe name="frame1" src="site2">

たとえば、最初のサイトが上記の iFrame を使用して 2 番目のサイトに読み込まれるとします。2 番目のサイト コードには、このコードが追加されている必要があります。

//site 2 code
$(something).load('url', function() {
    parent.frames["frame1"].css('border', '1px green solid');
});

サイト 1 から iFrame に関数呼び出しを行うこともできると思います。

//site 1 code
parent.frames["frame1"].functionName(variables);
于 2011-02-02T20:54:01.437 に答える
0

逆に、含まれているドキュメントから境界線を削除し、iframe 内に偽の境界線を追加して変更し、クロスドメインの問題を解決しました。

于 2011-02-06T14:40:55.763 に答える
0

フレームは単なる HTML コンテンツではありませんか? iframe 内の body タグの周りに直接ボーダーを追加することはできませんか?

2 つの追加ピクセルのためにコンテンツが移動することが心配な場合は、最初に同じサイズの透明な境界線を配置してください。

于 2011-02-06T14:44:28.020 に答える