36

外部ページから iframe に読み込まれたページにアクセスする方法を理解するのに苦労しています。どちらのページもローカル ファイルで、私は Chrome を使用しています。

私は外側のページと多くの内側のページを持っています。外側のページには常に内側のページのページ タイトルを表示する必要があります (私のアプリケーションでは意味がありますが、この簡略化された例ではあまり意味がありません)。これは AppJS では問題なく動作しますが、このアプリをブラウザで直接動作させるように依頼されました。「発信元が「null」のフレームが、発信元が「null」のフレームにアクセスすることをブロックしました。プロトコル、ドメイン、およびポートが一致する必要があります。

これは、ローカル ファイルに関する Chrome の同一生成元ポリシーによるものだと思いますが、問題を直接解決するのには役立っていません。同じ生成元ポリシーを回避する方法 ごとに window.postMessage メソッドを使用することで、この簡素化された例の問題を回避できます。ただし、この例を超えて、外側のページから内側のページの DOM を操作したいと考えています。これにより、コードがよりクリーンになるため、メッセージを投稿してもうまくいきません。

外のページ

<!DOCTYPE html>
<html>
    <head> 
        <meta name="viewport">
    </head> 
    <body>
        This text is in the outer page
        <iframe src="html/Home.html" seamless id="PageContent_Iframe"></iframe>
        <script src="./js/LoadNewPage.js"></script>
    </body>
</html>

内部ページ

<!DOCTYPE html>
<html>
    <head>
        <title id="Page_Title">Home</title> 
        <meta name="viewport">
    </head> 
    <body>
        This text is in the inner page
    </body>
</html>

JavaScript

var iFrameWindow = document.getElementById("PageContent_Iframe").contentWindow;
var pageTitleElement = iFrameWindow.$("#Page_Title");

Per iFrame がローカル html ファイルからローカル html ファイルをロードするときに、Chrome の将来のリリースで contentWindow/contentDocument がサポートされる可能性はありますか? 、フラグ付きでChromeを起動してみた

--allow-file-access-from-files

しかし、結果に変化はありませんでした。

Disable same origin policy in Chromeごとに、フラグを付けて Chrome を起動してみました

--disable-web-security

しかし、やはり結果に変化はありませんでした。

per document.domain = document.domain は何をしますか? 、両方のページにコマンドを実行させました

document.domain = document.domain;

これにより、エラー "起点 "null" を持つフレームが起点 "null" を持つフレームにアクセスするのをブロックしました。アクセスを要求するフレームは "document.domain" を "" に設定しましたが、アクセスされているフレームはそうではありませんでした。 両方を設定する必要があります " document.domain" を同じ値に変更して、アクセスを許可します。 "

楽しみのために、両方のページでコマンドを実行しました

document.domain = "foo.com";

これにより、「Uncaught Error: SecurityError: DOM Exception 18」というエラーが発生しました。

もがいてます。より知識のある人々からの助けは素晴らしいでしょう！ありがとう！

4

3 に答える 3

19

申し訳ありませんが、この問題を解決するために数週間試みましたが (プロジェクトで必要でした)、それは不可能であるというのが私の結論です。

Chrome での JavaScript によるローカル アクセスには多くの問題があり、それらのいくつかは HTML5 のオフライン機能を含め、--allow-file-access-from-filesとを使用して解決できます--disable-web-securityが、ローカル ファイルにアクセスする方法は絶対にないと思います。

これを回避しようとして時間を無駄にせず、内部ページに解釈できるメッセージを投稿しようとすることをお勧めします。そうすれば、そこで DOM の変更を行うことができます。

于 2013-07-30T15:08:59.850 に答える
12

ちょうど1分前の私のキューブでの議論によると:)

AJAXポストリクエストを正しく機能させようとして、この同じ問題（エクスプレスjsからのAjaxポストレスポンスがエラーをスローし続ける）に遭遇しました。

ファイルシステムから直接ファイルを実行するのではなく、ローカルサーバーから実行することで回避できました。ノードを使用してexpress.jsを実行しました。次のコマンドでエクスプレスをインストールできます。 npm install -g express

それが完了したら、次のコマンドを使用して高速プロジェクトを作成できます: express -s -e expressTestApp

これで、そのフォルダーに、app.js という名前のファイルと public という名前のフォルダーが表示されます。作業したい html ファイルを public フォルダーに置きます。ファイル app.js を次のコードに置き換えました。

var express = require('/usr/lib/node_modules/express');
var app = express();

app.use(function(err, req, res, next){
  console.error(err.stack);
  res.send(500, 'Something broke!');
});

app.use(express.bodyParser());
app.use(express.static('public'));

app.listen(5555, function() { console.log("Server is up and running");  });

require 行は異なる場合があることに注意してください。システムが実際にエクスプレスを置く場所を見つける必要があります。次のコマンドでそれを行うことができます: sudo find / -name express

ここで、次のコマンドを使用して Express Web サーバーを開始します。 node app.js

この時点で、Web サーバーは稼働しています。ブラウザを開いて、IP アドレス (サーバーと同じマシンの場合は 127.0.0.1) に移動します。ip address:portnumber\filename.html を使用します。ポート番号は、作成した app.js ファイルの 5555 です。

そのブラウザーでは、これらの同じ問題が発生することはありません (テストしたときも発生しませんでした)。

于 2013-08-01T14:08:47.397 に答える