web-dev-qa-db-ja.com

Chromeのローカルファイルでiframeを使用する

外側のページからiframeにロードされたページにアクセスする方法を理解するのに苦労しています。どちらのページもローカルファイルであり、Chromeを使用しています。

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

これは、ローカルファイルに関するChromeの同じOriginポリシーによるものだと思いますが、それでも問題を直接解決する助けにはなりませんでした。 same-Originポリシーを回避する方法 に従って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");

iFrameがローカルhtmlファイルからローカルhtmlファイルをロードするときにChromeがcontentWindow/contentDocumentをサポートする可能性は高いですか？ 、私はChromeフラグ付き

--allow-file-access-from-files

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

Chromeで同じOriginポリシーを無効にする 、フラグ付きでChromeを起動しようとしました

--disable-web-security

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

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

document.domain = document.domain;

これにより、エラー「Origin "null"のフレームがOrigin "null"のフレームにアクセスできませんでした。アクセスを要求するフレームは "document.domain"を ""に設定しましたが、アクセスされていませんでした。アクセスを許可するには、両方とも「document.domain」を同じ値に設定する必要があります。 "

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

document.domain = "foo.com";

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

私はガタガタです。もっと知識のある人からの助けは素晴らしいでしょう！ありがとう！

javascriptgoogle-chromeiframesame-origin-policyappjs
36
Aurora Tiffany-Davis

ほんの数分前の私のキューブでの議論によると:)

私はこの同じ問題にぶつかりました（ express jsからのAjax post responseはエラーをスローし続けます ）AJAX post requestを正しく動作させるために取得しようとしています。

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

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

これで、そのフォルダーにapp.jsという名前のファイルとpublicという名前のフォルダーが表示されます。作業したいhtmlファイルをパブリックフォルダーに入れます。ファイル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

次に、次のコマンドで高速Webサーバーを起動します：node app.js

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

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

12
Brian

私はこの問題を解決するために何週間も試みた（プロジェクトのためにそれを必要とした）と言ってすみませんが、私の結論はそれは不可能だということです。

Chromeを使用したjavascriptを介したローカルアクセスには多くの問題があり、それらの一部は--allow-file-access-from-filesと--disable-web-securityを使用して解決できます。HTML5のオフライン機能もいくつかありますが、ファイル。

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

18
panthalassa

file：//プロトコルとhttp：//プロトコルは、iframeに関して非常に異なる動作をさせます。 PhoneGapのアプリで説明したのと同じ問題があり、ファイルプロトコルを使用してローカルのasset/wwwフォルダー内のすべてのローカルファイルにアクセスします。

セキュリティ上の理由から、最新のブラウザがiframeのファイルプロトコルを使用して「ローカル」ファイルの表示を妨げる​​と思われる場合。

最終的にiframeをダンプし、divを「ビューポート」として使用しました。幸いなことに、アプリ全体のサイズはそれほど大きくなかったため、すべてを1つのページに読み込むことができました。

2
Peter Drinnan