iframe框架自适应高度 uncanght SecurityError: Blocked a frame with origin "null" from accessing a frame ....
来源于crm项目的contact/edit.html
一、背景是这样的
最近在做crm系统的前端页面,有一个页面呢,点击“查看全部信息”时会弹出,这个弹窗里面又有分页导航,分页不是使用ajax 异步刷新请求写的,而是通过刷新页面。由于整站的分页都是使用这个方法,所以不可能让后端同事用ajax重写一个分页,所以呢,就想到使用iframe框架,把这个弹窗写在html文件,放在iframe中完成。一切都是perfect的想法。
二、问题来了!解决问题
此时不仅仅是没有高度自适应而且还报错,其实这报的错的是域为空,因为我没有放在同一个域中来运行代码。
解决方法是:把这些页面都放在apache服务器下运行,也就是保证他们有域,且在同一个域中。
好的,现在就是代码不报错,我们此时只需要再用js获取一下这个div的高度就好了。
/* 联系人contact */
(function(){
var contact = {
reinitIframe:function(){
var iframe = document.getElementById("iframe-div");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){
}
// window.setInterval("reinitIframe()", 200); 函数调用挪到页面中
}
};
window.contact = contact;
})()
我习惯把方法保存在一个对象中,这样维护起来方便点。
现在获取高度的方法写好,接着就是在页面中去调用这个方法。
<script type="text/javascript" src="../../../resource/js/crm.js"></script>
<script>
// iframe 自适应高度
$(function(){
window.setInterval("contact.reinitIframe()", 200);
});
</script>
一切就绪,我们在本地服务器执行一下代码。如图1:
我们直接用浏览器打开,如图2:
!!如果有人也是使用iframe嵌套进去的方法,页面中的内容高度不再自适应了,此时计算div的高度的方法又是没错的,那么有可能就是没有把页面方法同一个域中去执行,所以的解决的方法就是可以放在服务器下去执行。如果你是使用浏览器直接打开,那么使用的可能是file协议,所以才会导致浏览器报错,说域为空。下次出错就试试放在服务器下去执行吧。可以直接下个wamp安装包,把页面代码扔进来执行。
三、学习到的
1、报错要善于从报错信息找出问题所在。我一开始没有想到是文件没有在同一个域中的问题,一直以为是我js获取内容高度出错 ,所以一直在这个js函数中找错误,后来认真看了报错信息,才知道原来是没在同一个域中。打脸~
2、使用到了iframe去嵌套页面,虽然网上各种批评iframe框架执行效率低之类,但是能解决问题的就是好的吧。
iframe框架自适应高度 uncanght SecurityError: Blocked a frame with origin "null" from accessing a frame ....的更多相关文章
- 【运行错误】Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
代码如下: <html> <head> <script> /*window.frames[]可以通过下标或名称访问单独的frame*/ window.onload= ...
- jQuery实现iframe的自适应高度
假设我们在当前页面要嵌套一个iframe 1 <iframe id="myframe" src="test.html" height="240& ...
- 跨域问题 Blocked a frame with origin "http://......" from accessing a cross-origin frame.
为了轻松偷懒,不想从目的项目中开发目标项目中的页面,但目的项目中需要获取老项目中的页面,这里用了iframe跨域链接页面出现了问题 Blocked a frame with origin " ...
- iframe内容自适应高度
一直觉得要用JS才能实现iframe高度的自适应,其实CSS也可以,而且实现的更好,只是需要给包裹iframe的DIV设置个高度,然后让irame高度设置成100%就可以自适应了. 完美版Iframe ...
- 关于使用iframe标签自适应高度的使用
在ifrome内设定最小高度,(此方法只适用于页面内切换高度不一.但是会保留最大高度,返回后保持最大高度不再回到最初页面的高度) <iframe id="one4" widt ...
- iframe 标签自适应高度和宽度
iframe 结构如下 <iframe src="index.html" id="frame" frameborder="0" scr ...
- iframe的自适应高度
<iframe src="index.html" id="iframepage" name="iframepage" frameBor ...
- <iframe>标签自适应高度和宽度
<iframe src="index.html" id="iframepage" frameborder="0" scrolling= ...
- iframe实现自适应高度
代码简单,兼容性还可以 <script>function SetWinHeight(obj) { var win=obj; if (document.getElementById) ...
随机推荐
- Linux系统调用列表
转自Linux系统调用列表 一.进程控制: fork 创建一个新进程 clone 按指定条件创建子进程 execve 运行可执行文件 exit 中止进程 _exit 立即中止当前进程 getdtabl ...
- php 数组指针相关函数current(),next(),prev(),end()
mixed current(array target_array) current()函数返回位于target_array数组当前指针位置的数组值.与next().prev().和end()函数不同, ...
- C语言关键字 - 铁布衫:const 转载
const 描述:相传C世界中出现了一件极品装备const,它能的出现,让天下所有的刺客,黑客都失业了,在它的保护下,所有的变量都可以完好无损. 作用:const是constant的简写,表示海枯石栏 ...
- Altium Designer中默认取消重复画线的选项
- 调色板QPalette类用法详解(附实例、源码)
http://blog.csdn.net/rl529014/article/details/51589096
- PHP奇趣笔试试题一则
$a = 3; $b = 5; if($a = 5 || $b = 7){ $a++; $b++; } echo $a, ' ', $b; 输出结果为: A.6 8 B.6 6 C.2 6 D.1 6 ...
- python的whl文件安装
python27win32安装:https://www.python.org/downloads/ 下载2.7的 安装中一路下一步即可: 配置python系统环境变量: 新建: PY ...
- TortoiseSVN设置比较工具为BeyondCompare
1. "C:\Beyond Compare 4\BCompare.exe" %base %mine /title1=%bname /title2=%yname /leftread ...
- Java 数组在内存中的结构
Java中的数组存储两类事物: 原始值(int,char,...),或者引用(对象指针). 当一个对象通过 new 创建,那么将在堆内存中分配一段空间,并且返回其引用(指针). 对于数组,也是同样的方 ...
- 结构体 fseg_inode_t;
typedef byte fseg_inode_t;