【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协议不熟悉,请大家不吝赐教。
【HTML】iframe跨域访问问题的更多相关文章
- iframe跨域访问
js跨域是个讨论很多的话题.iframe跨域访问也被研究的很透了. 一般分两种情况: 一. 是同主域下面,不同子域之间的跨域: 同主域,不同子域跨域,设置相同的document.domian就可以解决 ...
- CP="CAO PSA OUR" 用P3P header解决iframe跨域访问cookie
1.IE浏览器iframe跨域丢失Session问题 在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session的因此,网上 ...
- 在IE浏览器中iframe跨域访问cookie/session丢失的解决办法
单点登录需要在需要进入的子系统B中添加一个类,用于接收A系统传过来的参数: @Action(value = "outerLogin", results = { @Result(na ...
- js iframe跨域访问
1.什么是跨域? 2.前台解决跨域几种方法 2.1 动态创建script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和loc ...
- IFrame跨域访问自定义高度
由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 ...
- IFrame跨域访问&&IFrame跨域访问自定义高度
1.IFrame跨域访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame跨域访问自定义高度: 由于JS禁止跨域访问,如 ...
- javascript跨域、iframe跨域访问
1.window 对象 浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象.但是,如果一个文档定义了一个或多个框架(即,包含一个或多个 frame 或 iframe 标签),浏览 ...
- iframe跨域访问出现的cookie问题,提供两种解决方案
最近在java项目对接时出现的一个问题.A系统嵌入B系统页面时,使用iframe去嵌入B系统页面丢失sessionid,导致B系统认为是未进行登录的请求,从而跳转到了B系统登录页. 解决方法查看此博客 ...
- IE中iframe跨域访问
http://blog.csdn.net/ghsau/article/details/13747943
随机推荐
- Leetcode 345 Reverse Vowels of a String 字符串处理
题意:倒置字符串中的元音字母. 用两个下标分别指向前后两个相对的元音字母,然后交换. 注意:元音字母是aeiouAEIOU. class Solution { public: bool isVowel ...
- js高仿QQ消息列表左滑功能
该组件,主要功能类似于QQ消息列表左滑出现删除.标为已读等按钮的功能:现在的版本用的是纯javaScript编写:后续会跟进 angularJs 开发的类似组件以及jquery的; 下面,就让我们来认 ...
- 解决pageControl页面设置无效问题
废话不多说,先上代码 1.添加pageViewControl - (void)addPageControl { UIPageControl *pageControl = [[UIPageControl ...
- Ubuntu14.04.1 阿里apt源
deb http://mirrors.aliyun.com/ubuntu/ trusty main restricted universe multiversedeb http://mirrors.a ...
- shell 时间统计脚本
#!/bin/sh #Today=`date +%Y%m%d` YEAR=`echo $|cut -c -` MONTH=`echo $|cut -c -` DAY=`echo $|cut -c -` ...
- php: zend server 安装及相关配置
运行安装文件(ZendServer-CE-php-5.3.2-5.0.1-Windows_x86.exe)开始安装,选项请参照我的选择. 这里不做改动,维持默认选择即可 点击Browse按钮更改安装目 ...
- android: SQLite更新数据
学习完了如何向表中添加数据,接下来我们看看怎样才能修改表中已有的数据. SQLiteDatabase 中也是提供了一个非常好用的 update()方法用于对数据进行更新,这个方法 接收四个参数,第一个 ...
- LPC43xx Dual-core or Multi-core configuration and JLink Debug
Test access port (TAP) JTAG defines a TAP (Test access port). The TAP is a general-purpose port that ...
- [leetcode]Maximum Product Subarray @ Python
原题地址:https://oj.leetcode.com/problems/maximum-product-subarray/ 解题思路:主要需要考虑负负得正这种情况,比如之前的最小值是一个负数,再乘 ...
- JSON编码格式提交表单数据详解
以JSON编码格式提交表单数据是HTML5对WEB发展进化的又一大贡献,以前我们的HTML表单数据是通过key-value方式传输的服务器端,这种形式的传输对数据组织缺乏管理,形式十分原始.而新出现的 ...