在Chrome中使用iframe和本地文件

Aur*_*vis 36 javascript iframe google-chrome same-origin-policy appjs

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

我有一个外页和许多内页.外部页面应始终显示内部页面的页面标题(在我的应用程序中有意义,在这个精简的示例中可能更少).这在AppJS中没有任何问题,但我被要求直接在浏览器中使这个应用程序工作.我收到错误" Blocked a frame with origin"null"来访问一个原始"null"的帧.协议,域和端口必须匹配. "

我认为这是由于Chrome与本地文件的原始政策相同,但这并没有帮助我直接解决问题.我可以通过在每种方法中使用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>
Run Code Online (Sandbox Code Playgroud)

内页

<!DOCTYPE html>
<html>
    <head>
        <title id="Page_Title">Home</title> 
        <meta name="viewport">
    </head> 
    <body>
        This text is in the inner page
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

JavaScript的

var iFrameWindow = document.getElementById("PageContent_Iframe").contentWindow;
var pageTitleElement = iFrameWindow.$("#Page_Title");
Run Code Online (Sandbox Code Playgroud)

它是可能的Chrome支持contentWindow/contentDocument的未来版本时加载的iFrame从本地的HTML文件的本地HTML文件?,我尝试用旗帜启动Chrome

--allow-file-access-from-files
Run Code Online (Sandbox Code Playgroud)

但结果没有变化.

每次在Chrome中禁用相同的来源政策,我尝试使用旗帜启动Chrome

--disable-web-security
Run Code Online (Sandbox Code Playgroud)

但结果再没有变化.

Per document.domain = document.domain是做什么的?,我有两个页面都运行命令

document.domain = document.domain;
Run Code Online (Sandbox Code Playgroud)

这导致错误" 阻止具有原点的帧"null"访问具有原点"null"的帧.请求访问的帧"document.domain"为"",但被访问的帧没有.两者都必须设置" document.domain"以相同的值来允许访问. "

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

document.domain = "foo.com";
Run Code Online (Sandbox Code Playgroud)

这导致错误" Uncaught Error:SecurityError:DOM Exception 18 ".

我在挣扎.任何知识渊博的人的帮助都会很棒!谢谢!

pan*_*ssa 19

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

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

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


Bri*_*ian 12

我们在一小时前在我的立方体中的讨论:)

我遇到了同样的问题(来自快递js的Ajax帖子响应不断抛出错误)试图让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");  });
Run Code Online (Sandbox Code Playgroud)

注意,要求线可能不同.你必须找到你的系统实际表达的位置.您可以使用以下命令执行此操作: sudo find/-name express

现在,使用以下命令启动express Web服务器: node app.js

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

现在在浏览器中,您不应该(并且在我们测试它时没有)再有这些相同的问题.

  • 请注意,如果您安装了Python,则可以应用此处建议的相同方法和[设置Web服务器一行](http://stackoverflow.com/a/532710/710446):`python -m SimpleHTTPServer [port ]` (7认同)