Question

我很难搞清楚如何从外页访问iframe中加载的页面。这两个页面都是本地文件，而我正在使用Chrome。

我有一个外页和许多内页。外部页面应始终显示内部页面的页面标题（在我的应用程序中有意义，在这个精简的示例中可能更少）。这在AppJS中没有任何问题，但我被要求直接在浏览器中使这个应用程序工作。我收到错误“阻止带有原始的帧”null“访问具有原始”null“的帧。协议，域和端口必须匹配。”。

我认为这是由于Chrome与本地文件的原始政策相同，但这并没有帮助我直接解决问题。我可以通过使用每个Ways to circumvent the same-origin policy的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");

根据Is it likely that future releases of Chrome support contentWindow/contentDocument when iFrame loads a local html file from local html file?，我尝试使用标记

启动Chrome

--allow-file-access-from-files

但结果没有变化。

根据Disable same origin policy in Chrome，我尝试使用标记

启动Chrome

--disable-web-security

但结果再没有变化。

每What does document.domain = document.domain do?，我有两个页面都运行命令

document.domain = document.domain;

这导致错误“阻止具有原点的帧”null“访问具有原点”null“的帧。请求访问的帧将”document.domain“设置为”“，但正在访问的帧确实两者都必须将“document.domain”设置为相同的值以允许访问。“

为了好玩，我让两个页面都运行命令

document.domain = "foo.com";

这导致错误“ Uncaught Error：SecurityError：DOM Exception 18 ”。

我正在挣扎。任何知识渊博的人的帮助都会很棒！谢谢！

Answer 1

我很遗憾地告诉你，我已经在几周内尝试解决这个问题（我需要一个项目），我的结论是，这是不可能的。

通过带有chrome的javascript本地访问存在很多问题，其中一些可以使用--allow-file-access-from-files和--disable-web-security解决，包括一些HTML5离线功能，但我绝对认为没办法访问本地文件。

我建议你不要浪费你的时间来尝试发送它并尝试发布你可以解释到内页的消息，这样你就可以在那里进行DOM修改。

Answer 2

我们在一小时前在我的立方体中的讨论：）

我遇到了同样的问题（Ajax post response from express js keeps throwing error）试图让AJAX帖子请求正常工作。

让我了解的不是直接从文件系统运行文件，而是从本地服务器运行它。我用node来运行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.

现在在浏览器中，您不应该（并且在我们测试它时没有）再遇到任何相同的问题。

Answer 3

file：// protocol和http：//协议使iframe的行为方式非常不同。我在PhoneGap上使用应用程序描述了同样的问题，它使用文件协议访问本地assets / www文件夹中的所有本地文件。

出于安全原因，似乎现代浏览器阻止在iframe中使用文件协议显示“本地”文件。

我们最终倾销了iframe并且只使用了div作为“视口”。幸运的是，我们的应用程序的总体规模并不大，所以我们设法在一个页面中加载所有内容。

在Chrome中使用iframe和本地文件

3 个答案: