【HTML】iframe跨域访问问题

概述

本地同一浏览器访问本地HTML文件和访问服务器端HTML文件,本地Iframe没有自适应高度,而服务器端的Ifrane自适应了高度。

1.问题重现:

Chrome 版本 41.0.2272.101 (64-bit)

OS:Win8.1

Chrome访问服务器端HTML文件呈现的结果

Chrome访问本地HTML文件呈现的结果

本地访问的HTML文件Iframe没有根据Iframe里面的页面类容自适应高度

2.Iframe自适应高度代码

在index.html文件中间中添加Iframe页面,页面加载时,加载src指定的文件路径

<iframe id="indexFrame" name="index" width="800" onload=‘iFrameHeight("indexFrame")‘ src="Web/Index/indexIframe.html"
           frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

JS脚本自适应调整Iframe高度

    </script>
    <script type="text/javascript" language="javascript">
        function iFrameHeight(id) {
            var ifm = document.getElementById(id);
            var subWeb = document.frames ? document.frames[id].document : ifm.contentDocument;
            if (ifm != null && subWeb != null) {
                ifm.height = subWeb.body.scrollHeight;
            }
        }
    </script>

3.调试代码

Uncaught SecurityError: Failed to read the ‘contentDocument‘ property from ‘HTMLIFrameElement‘: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

在这里,我猜测是访问本地文件是file协议(file:///),HTML代码和JS代码存在跨域问题。小弟对file协议不熟悉,请大家不吝赐教。

时间: 2024-10-11 03:37:58

【HTML】iframe跨域访问问题的相关文章

iframe跨域访问

js跨域是个讨论很多的话题.iframe跨域访问也被研究的很透了. 一般分两种情况: 一. 是同主域下面,不同子域之间的跨域: 同主域,不同子域跨域,设置相同的document.domian就可以解决; 父页访问子页,可以document.getElementById("myframe").contentWindow.document来访问iframe页面的内容:如果支持contentDocument也可以直接document.getElementById("myframe&

js iframe跨域访问

1.同主域下不同子域之间的跨域请求  使用document.domain 比如:morningstar.com 和test.morningstar.com 只要把两个页面 的document.domain都指向主域就可以了,比如document.domain='morningstar.com' <!-- morningstar.com/parent.html --> <iframe id="ifr" src="http://test.morningstar.

iframe跨域访问父框架js方法

条件 1.不在同一个主域下 2.iframe调用父框架方法 环境说明 父框架有打开TAB页方法,但是子页面嵌入的是其他系统页面,同样需要打开TAB页. 方法描述 原理上就是通过子页面嵌入父框架页面来使用调用方法 父框架桥连页面 1 @{ 2 ViewBag.Title = "跨域桥连"; 3 Layout = "~/Views/Shared/_LayoutCenter.cshtml"; 4 } 5 6 @section Scripts{ 7 <script&g

跨域访问和同源策略

因为在同一个浏览器窗口中能够同时打开多个网站的页面,而且它们都处于同一个会话中,如果不禁止跨域访问则会造成用户隐私数据泄露和登录身份冒用的问题,所以浏览器会使用同源策略限制跨域访问. 在浏览器中,通过JS代码访问不同域名下的URL或者iframe时,会被禁止访问.而不是通过JS代码进行的跨域访问不存在跨域问题!比如跨域加载图片,引用JS文件,下载各种文件,使用iframe跨域嵌入其他网站的页面都是可以的. 跨域访问被禁止有时会给应用开发带来阻碍,但在符合特定条件时也有相应的方法在保证安全的情况下

框架元素-跨域访问-window.name

页面A:页面B,你能传个数据给我吗? 页面B:额,我们不在同一个域内,因为涉及到WEB安全问题,所以浏览器禁止我直接向你传数据. 页面A:有什么办法可以解决这个问题吗? 页面B:可以使用window.name. 页面A:那你需要我做些什么? 页面B:1.你先动态创建一个iframe节点:  2.设置节点属性src指向我:  3.我会设置window.name = 'b':  4.然后你重新设置节点iframe的属性src指向和你在同一个域下的兄弟页面C:  5.虽然属性src的值变了,但是win

ajax 设置Access-Control-Allow-Origin实现跨域访问

ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全. 即使使用jquery的jsonp方法,type设为POST,也会自动变为GET. 官方问题说明: “script”: Evaluates the response as JavaScript and returns it as plain text. Disables caching by appending a query string

JS同源策略和跨域访问

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现. 1. 什么是同源策略 理解跨域首先必须要了解同源策略.同源策略是浏览器上为安全性考虑实施的非常重要的安全策略. 何谓同源: URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源. 同源策略: 浏览器的同源策略,限制了来自不同源的"doc

三种方法实现js跨域访问

javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域 基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实

iframe跨域

1.什么引起了ajax跨域不能的问题 ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告. 2.有什么完美的解决方案么? 没有.解决方案有不少,但是只能是根据自己的实际情况来选择. 具体情况有: 一.本域和子域的相互访问: www.aa.com和book.aa.com 二.本域和其他域的相互访问: www.aa.com和www.bb.com 用 iframe 三.本域和其他域的相互访问: www.aa.com和w