在Chrome中对本地文件使用iframe

Using iframe with local files in Chrome

本文关键字：文件 iframe Chrome      更新时间：2023-09-26

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

我有一个外页，还有许多内页。外部页面应该始终显示内部页面的页面标题（这在我的应用程序中是有意义的，在这个精简的示例中可能不那么有意义）。这在AppJS中没有任何问题，但我被要求让这个应用程序直接在浏览器中工作。我收到错误"阻止原点为"null"的帧访问原点为"null"的帧。协议、域和端口必须匹配。".

我认为这是由于Chrome对本地文件的同源政策，但这并没有直接帮助我解决问题。在这个精简的例子中，我可以通过使用window.postMessage方法per-Ways来绕过同源策略来解决这个问题。然而，除了这个例子之外，我还想从外部页面操作内部页面的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

但结果没有变化。

根据禁用Chrome中的同源策略，我尝试使用标志启动Chrome

--disable-web-security

但结果再次没有变化。

根据document.domain=document.domain做什么？，我让两个页面都运行命令

document.domain = document.domain;

这导致错误"阻止原点为"null"的帧访问原点为"null"的帧。请求访问的帧将"document.domain"设置为"，但被访问的帧没有。两者必须将"document.domain"设置为相同值才能允许访问。"

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

document.domain = "foo.com";

这导致了错误"未捕获错误：安全错误：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-eexpressTestApp

现在，在该文件夹中，您应该会看到一个名为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");  });

请注意，需求行可能不同。你必须找到你的系统真正把快递放在哪里。您可以使用以下命令执行此操作：sudo find/-name express

现在，使用以下命令启动express web服务器：node-app.js

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

现在，在那个浏览器中，你不应该（在我们测试它时也没有）再遇到任何同样的问题了。

file://protocol和http://protocol使事情在iframe方面表现得非常不同。我在PhoneGap上的一个应用程序中遇到了与你描述的相同的问题，该应用程序使用文件协议访问本地资产/www文件夹中的所有本地文件。

如果现代浏览器出于安全原因，禁止在iframe中显示使用文件协议的"本地"文件。

我们最终抛弃了iframe，只使用div作为"视口"。幸运的是，我们的应用程序的总体大小没有那么大，所以我们设法在一个页面中加载了所有内容。

相关文章：