javascript 在 Chrome 中对本地文件使用 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17950598/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using iframe with local files in Chrome
提问by Aurora Tiffany-Davis
I am having a tough time figuring out how to access a page loaded in an iframe from the outer page. Both pages are local files, and I'm using Chrome.
我很难弄清楚如何从外部页面访问 iframe 中加载的页面。两个页面都是本地文件，我使用的是 Chrome。
I have an outer page, and many inner pages. The outer page should always display the page title for the inner page (it makes sense in my application, perhaps less so in this stripped-down example). This works without any problem in AppJS, but I've been requested to make this app work directly in the browser. I'm getting the error "Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.".
我有一个外页和许多内页。外页应始终显示内页的页面标题（这在我的应用程序中很有意义，在这个精简的示例中可能不那么有意义）。这在 AppJS 中没有任何问题，但我被要求让这个应用程序直接在浏览器中工作。我收到错误“阻止了一个原点为“空”的框架访问原点为“空”的框架。协议、域和端口必须匹配。“。
I think this is due to Chrome's same origin policy regarding local files, but that hasn't helped me fix the problem directly. I can work around the issue in this stripped-down example by using the window.postMessage method per Ways to circumvent the same-origin policy. However, going beyond this example, I also want to manipulate the DOM of the inner page from the outer page, since this will make my code much cleaner - so posting messages won't quite do the job.
我认为这是由于 Chrome 关于本地文件的同源策略，但这并没有帮助我直接解决问题。我可以通过使用 window.postMessage 方法 per Ways to bypass the same-origin policy 来解决这个精简示例中的问题。然而，除了这个例子之外，我还想从外页操作内页的 DOM，因为这将使我的代码更清晰 - 所以发布消息不会完全完成这项工作。
Outer Page
外页
<!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>
Inner Page
内页
<!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
JavaScript
var iFrameWindow = document.getElementById("PageContent_Iframe").contentWindow;
var pageTitleElement = iFrameWindow.$("#Page_Title");
Per Is it likely that future releases of Chrome support contentWindow/contentDocument when iFrame loads a local html file from local html file?, I tried launching Chrome with the flag
Per当 iFrame 从本地 html 文件加载本地 html 文件时，Chrome 的未来版本是否可能支持 contentWindow/contentDocument？，我尝试使用标志启动 Chrome
--allow-file-access-from-files
But there was no change in the results.
但结果没有任何变化。
Per Disable same origin policy in Chrome, I tried launching Chrome with the flag
根据在 Chrome 中禁用同源策略，我尝试使用标志启动 Chrome
--disable-web-security
But again there was no change in the results.
但结果再次没有变化。
Per What does document.domain = document.domain do?, I had both pages run the command
每document.domain = document.domain 有什么作用？，我让两个页面都运行命令
document.domain = document.domain;
This resulted in the error "Blocked a frame with origin "null" from accessing a frame with origin "null". The frame requesting access set "document.domain" to "", but the frame being accessed did not. Both must set "document.domain" to the same value to allow access."
这导致错误“阻止了一个原点为“空”的框架访问原点为“空”的框架。请求访问的框架将“document.domain”设置为“”，但被访问的框架没有。两者都必须设置“ document.domain" 为相同的值以允许访问。"
For fun, I had both pages run the command
为了好玩，我让两个页面都运行命令
document.domain = "foo.com";
This resulted in the error "Uncaught Error: SecurityError: DOM Exception 18".
这导致了错误“未捕获的错误：SecurityError：DOM Exception 18”。
I'm floundering. Any help from more knowledgeable people would be fantastic! Thanks!
我在挣扎。来自更多知识渊博的人的任何帮助都会很棒！谢谢！
采纳答案by Brian
Per our discussion in my cube just a minute ago :)
根据我们在一分钟前在我的立方体中的讨论:)
I hit this same problem (Ajax post response from express js keeps throwing error) trying to get an AJAX post request to work correctly.
我遇到了同样的问题（来自 express js 的 Ajax 发布响应不断抛出错误）试图让 AJAX 发布请求正常工作。
What got me around it is not running the file directly off the file system but instead running it from a local server. I used node to run express.js. You can install express with the following command: npm install -g express
让我绕过它的不是直接从文件系统运行文件，而是从本地服务器运行它。我使用 node 来运行 express.js。您可以使用以下命令安装 express： npm install -g express
Once that is accomplished, you can create an express project with the following command: express -s -e expressTestApp
完成后，您可以使用以下命令创建一个 express 项目： express -s -e expressTestApp
Now, in that folder, you should see a file named app.js and a folder named public. Put the html files you wish to work with in the public folder. I replaced the file app.js with the following code:
现在，在该文件夹中，您应该看到一个名为 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"); });
Note, the require line may be different. You have to find where your system actually put express. You can do that with the following command: sudo find / -name express
请注意，require 行可能会有所不同。您必须找到系统实际放置快递的位置。您可以使用以下命令执行此操作： sudo find / -name express
Now, start the express web server with the following command: node app.js
现在，使用以下命令启动快速 Web 服务器： node app.js
At this time, the webserver is up and running. Go ahead and open a browswer and navigate to your ip address (or if you're on the same machine as your server, 127.0.0.1). Use the ip address:portnumber\filename.html where port number is the 5555 in the app.js file we created.
此时，网络服务器已启动并正在运行。继续并打开浏览器并导航到您的 IP 地址（或者如果您与服务器在同一台机器上，则为 127.0.0.1）。使用 ip address:portnumber\filename.html，其中端口号是我们创建的 app.js 文件中的 5555。
Now in that browser, you shouldn't (and didn't when we tested it) have any of these same problems anymore.
现在在该浏览器中，您不应该（并且在我们测试它时也没有）遇到任何这些相同的问题。
回答by panthalassa
I'm sorry to say you that I've tried during weeks to solve this issue (I needed it for a project) and my conclusion is that it's not possible.
我很抱歉地告诉你，我已经在几周内尝试解决这个问题（我需要它用于一个项目），我的结论是这是不可能的。
There are a lot of problems arround local access through javascript with chrome, and some of them can be solved using --allow-file-access-from-filesand --disable-web-security, including some HTML5 offline features, but I definitely think there's no way to access local files.
通过javascript和chrome进行本地访问有很多问题，其中一些可以使用--allow-file-access-from-files和解决--disable-web-security，包括一些HTML5离线功能，但我绝对认为没有办法访问本地文件。
I recomend you not to lose your time trying to circunvend this and to try to post messages wich you can interpret into the inner pages, so you can do the DOM modifications there.
我建议您不要浪费时间试图绕过这一点并尝试发布可以解释到内页的消息，这样您就可以在那里进行 DOM 修改。
回答by Peter Drinnan
file:// protocol and http:// protocol make things to behave very differently in regards to iframes. I had the same issues you describe with an app on PhoneGap which uses file protocol to access all local files within the local assets/www folder.
file:// 协议和 http:// 协议使事情在 iframe 方面表现得非常不同。我遇到了您在 PhoneGap 上的应用程序中描述的相同问题，该应用程序使用文件协议访问本地资产/www 文件夹中的所有本地文件。
If seems that modern browsers prevent the display of "local" files using the file protocol in iframes for security reasons.
如果出于安全原因，现代浏览器似乎阻止使用 iframe 中的文件协议显示“本地”文件。
We ended up dumping iframes and just using divs as "viewports". Fortunately the overall size of our app was not that big so we managed to load everything in a single page.
我们最终转储了 iframe 并仅使用 div 作为“视口”。幸运的是，我们的应用程序的整体大小并没有那么大，所以我们设法在一个页面中加载了所有内容。
