访问本地文件的iframe内容 [英] access to iframe contents of local file

查看:1011
本文介绍了访问本地文件的iframe内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有文件 file:/// C:/index.html ,里面有一个iframe:

 < iframe id =folder_browsersrc =file:/// C:/ Files />< / iframe> 

Files 文件夹的内容载入iframe,但我不能通过javascript或jquery访问它们。我可以做什么?



我试过 $('#folder_browser')。contents()。find('body')。html ); 但没有运气!

解决方案

原因同源策略 iframe的内容无论是在这种情况下,还是在您拥有来自域的主页和来自其他域的iframe文档的情况下。



相同来源策略是浏览器应用于网页以防止相互通信的一组限制。这些限制可以防止互联网网站出现很多安全问题,例如使用像这样的技巧访问存储在本地计算机上的私人数据。

然而,有一些方法(以及条件)来绕过这些限制:
$ b $ ol <
  • window.document.domain变量操作

  • Proxy

  • 交叉文档消息传递

  • 但是,只有当两个页面都位于同一个域中,通过修改两个html页面(特别是他们的javascript)的内容,因此页面可以授权彼此通信。这只能在父页面和iframe子页面都是网页时才能完成:在这种情况下,地址 file:/// C:/ something / 不是网址,而是本地目录。



    可以在

    处找到一些关于相同原产地保单
    的有趣教程, 绕过同源策略




    file:URI的同源策略



    在这最后一个特别的例子中,如果用户不'',则可以将新的 security.fileuri.strict_origin_policy 首选项设置为false,默认为true。 t要严格执行文件:URIs上的同一起源策略。



    Anot她有趣的信息资源是:

    在开发过程中绕过本地文件的同源策略



    其中我发现了以下提示可能有所帮助:


    唯一真正的跨浏览器解决方案为了解决这个问题,就是用本地的网络服务器提供内容,这样你就可以通过HTTP访问它。


    换句话说您必须将Web服务器软件安装到您的计算机中,并将其配置为在诸如 http:/// yourlocalwebserver目录之类的地址下提供文件。 。

    然而,您可以使用html输入类型文件(这里是一个工作示例)获取文件(与用户的交互):



    document.getElementById('loadfile')。onchange = function(event){var files = loadfile。文件; var len = files.length; var outpt = document.getElementById('filelist'); for(var i = 0; i< len; i ++){outpt.innerHTML + = files [i] .name +'< br>'; }}

    < input type =fileid = loadfilename =files []multiple =multipletitle =加载一个或多个文件autofocus =autofocus/>< div id =filelist>< / div>


    I have the file file:///C:/index.html that has an iframe inside it:

    <iframe id="folder_browser" src="file:///C:/Files/"></iframe>
    

    the contents of the Files folder load into the iframe but I can not access to them by javascript or jquery. what can I do?

    I have tried $('#folder_browser').contents().find('body').html(); but no luck!

    解决方案

    Cause "Same origin policy" you can't get the content of an iframe either in this kind of situations nor in the case you have the main page from a domain and the iframe document from another domain.

    "Same origin policy" is a set of restrictions that browsers apply to webpages to prevent communicating each other. These restrictions prevent a lot of security issues from internet web sites like accessing to your private data stored on your local machine using tricks like that one.

    Nevertheless there are some ways (and conditions) to bypass these restrictions:

    1. window.document.domain variable manipulation
    2. Proxy
    3. Cross Document Messaging

    But this is possible only if both pages are into the same domain and by modifying the content of both html pages (in particular their javascripts) so pages can authorize each other communications. This can be only done if both the parent page and the iframe child page are web pages: in this case the address file:///C:/something/ is not a web address, it is a local directory.

    It is possible to find some interesting tutorials about same origin policy at

    Bypass Same Origin Policy ,

    and

    Same-origin policy for file: URIs .

    In this last one in particular you can read "The new security.fileuri.strict_origin_policy preference, which defaults to true, can be set to false if the user doesn't want to strictly enforce the same origin policy on file: URIs."

    Another interesting information resource is:

    Bypassing the Same-Origin-Policy For Local Files During Development .

    In which I found the following hint that may help:

    The only real cross-browser solution to circumvent the problem altogether is to serve the content with a local webserver, so that you can access it through HTTP.

    In other words you have to install a web server software into your computer and configure it to serve files under an address like http:///yourlocalwebserverdirectory.

    Nevertheless you can get files (with the interaction of the user) by using the html input type file, here a working example:

    document.getElementById('loadfile').onchange = function(event) {
      var files = loadfile.files;
      var len = files.length;
      var outpt = document.getElementById('filelist');
      
       for (var i=0; i<len; i++)
         {
           outpt.innerHTML += files[i].name + '<br>';
         }
     }

    <input type="file" id="loadfile" name="files[]" multiple = "multiple" title="load one or more files" autofocus="autofocus" />
    
    <div id="filelist"></div>

    这篇关于访问本地文件的iframe内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

    查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆