关于javascript：在Chrome中将iframe与本地文件一起使用


Using iframe with local files in Chrome

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

我有一个外页，还有很多内页。外页应始终显示内页的页面标题(在我的应用程序中很有意义，在此精简示例中可能更是如此)。这在AppJS中没有任何问题，但是我被要求直接在浏览器中工作。我收到错误消息"通过访问源为" null"的帧阻止了源为" null"的帧。协议，域和端口必须匹配。"

我认为这是由于Chrome对本地文件采用了相同的原始政策，但这并不能帮助我直接解决此问题。我可以通过使用每种方法绕开同源策略的window.postMessage方法来解决此精简示例中的问题。但是，除了这个示例之外，我还想从外部页面操纵内部页面的DOM，因为这将使我的代码更加整洁-因此发布消息并不能完全解决问题。

外页

1
2
3
4
5
6
7
8
9
10
11
<!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">
    </body>
</html>

内页

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <head>
        <title id="Page_Title">Home
        <meta name="viewport">
    </head>
    <body>
        This text is in the inner page
    </body>
</html>

的JavaScript

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

当iFrame从本地html文件加载本地html文件时，Chrome的将来版本是否可能支持contentWindow / contentDocument？我尝试用标志启动Chrome

1
--allow-file-access-from-files

但是结果没有变化。

根据Chrome中的"禁用相同来源策略"，我尝试使用标记启动Chrome

1
--disable-web-security

但是结果仍然没有变化。

按照document.domain = document.domain的作用？，我让两个页面都运行命令

1
document.domain = document.domain;

这导致错误"访问源为" null"的帧阻止了源为" null"的帧。请求访问的帧将" document.domain"设置为"，但未访问"。两者都必须将" document.domain"设置为相同的值以允许访问。"

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

1
document.domain ="foo.com";

这导致错误"未捕获的错误：SecurityError：DOM异常18"。

我在挣扎。来自知识渊博的人们的任何帮助都是很棒的！谢谢！

很遗憾地说，我已经尝试了数周来解决此问题(我在项目中需要它)，但得出的结论是这是不可能的。

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

我建议您不要浪费时间尝试绕过此问题，并尝试发布消息，以便您可以解释内部页面，以便可以在那里进行DOM修改。

相关讨论

根据我们刚才在立方体中的讨论：)

我遇到了同样的问题(来自Express js的Ajax发布响应不断抛出错误)，试图使AJAX发布请求能够正常工作。

使我无法解决的问题不是直接在文件系统上运行文件，而是从本地服务器运行它。我使用node运行express.js。您可以使用以下命令安装express：npm install -g express

完成后，您可以使用以下命令创建一个Express项目：express -s -e expressTestApp

现在，在该文件夹中，您应该看到一个名为app.js的文件和一个名为public的文件夹。将您要使用的html文件放在公用文件夹中。我将文件app.js替换为以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
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");  });

注意，要求行可能不同。您必须找到系统实际放置快递的位置。您可以使用以下命令执行此操作：sudo find / -name express

现在，使用以下命令启动快速Web服务器：node app.js

此时，Web服务器已启动并正在运行。继续并打开浏览器，然后导航到您的ip地址(或者，如果您与服务器位于同一台计算机上，则为127.0.0.1)。使用ip地址：portnumber \ filename.html，其中端口号是我们创建的app.js文件中的5555。

现在，在该浏览器中，您不再(而且当我们对其进行测试时也没有)不再遇到这些相同的问题。

相关讨论

file：//协议和http：//协议在iframe方面的行为大相径庭。我在PhoneGap上使用应用程序使用文件协议访问本地资源/ www文件夹中的所有本地文件的应用程序遇到了相同的问题。

出于安全原因，现代浏览器似乎似乎无法使用iframe中的文件协议来显示"本地"文件。

我们最终转储了iframe，仅将div用作"视口"。幸运的是，我们应用程序的整体大小并不大，因此我们设法将所有内容加载到单个页面中。

相关讨论