file模式访问网页时iframe高度自适应解决方案
最近做到iframe的高度自适应这个问题,网上一搜好多解决方案,而总结起来也就那几种,我逐一尝试这些方案,最后发现在我的项目中都不起作用,后来发现自己做的网页是通过file方式访问的,将网页代码放到apache下通过http协议访问,在iframe加载的时候调用如下js方法:
代码如下:
<SPANstyle="FONT-FAMILY:KaiTi_GB2312;FONT-SIZE:18px">functionSetWinHeight(obj)
{
varwin=obj;
if(document.getElementById)
{
if(win&&!window.opera)
{
if(win.contentDocument&&win.contentDocument.body.offsetHeight)
win.height=win.contentDocument.body.offsetHeight;
elseif(win.Document&&win.Document.body.scrollHeight)
win.height=win.Document.body.scrollHeight;
}
}
}</SPAN>
果然网页高度能够自适应(对于其他方案应该也有效果,我没有注意去尝试),而通过file方式访问网页同样的的代码log中始终报:UnsafeJavaScriptattempttoaccessframewithURLfile:///E:/workspace/html5/exam.htmlfrom
framewithURLfile:///E:/workspace/html5/quiz_preview.html.
Domains,protocolsandportsmustmatch.
每种方案都尝试了报的错是这个,只能从这个问题下手解决了,后来发现这种通过file方式跨域访问的方式chrome是默认不允许的,又查如何设置chrome允许跨域访问:最简单的方法在chrome图标右键、属性->目标在后添加‘--disable-web-security'
重新启动chrome打开要调的网页,问题果然解决了
相关推荐
-
如何设置iframe高度自适应在跨域情况下的可用方法
在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法.在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面,这样当父页面被访问的时候,子页面可以被自动加载.iframe的高度需要根据子页面的实际高度来进行调整.如果iframe的高度小于子页面的实际高度,超出的部分无法显示:相反,如果iframe的高度过高,则页面上会出现大量的空白区域.我们可以通过属性或者CSS来设置iframe的高度,当不确定子页面内容的高度时,也可以通过脚本来进行动态指定.但是如果
-
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
找到了下面这个js 复制代码 代码如下: function SetCwinHeight(obj) { var cwin=obj; if (document.getElementById) { if (cwin && !window.opera) { if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight) cwin.height = cwin.contentDocument.body.offset
-
IFrame跨域高度自适应实现代码
复制代码 代码如下: var iframeids = ['memberIndexIframe','inquiryCenterIframe','everychinaBbsIframe']; var iframehide = "yes"; function dynIframeSize(){ var dyniframe = []; for(var i=0;i<iframeids.length;i++){ if(!document.getElementById) return false
-
jQuery解决iframe高度自适应代码
复制代码 代码如下: <script type="text/javascript"> <!-- $( function() { //iframe高度随内容自动调整 $('.main').load( function() { $(this).height($(this).contents().find("b
-
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
复制代码 代码如下: function SetIFrameHeight(down) { var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/chrome\/([\d.]+)/
-
file模式访问网页时iframe高度自适应解决方案
最近做到iframe的高度自适应这个问题,网上一搜好多解决方案,而总结起来也就那几种,我逐一尝试这些方案,最后发现在我的项目中都不起作用,后来发现自己做的网页是通过file方式访问的,将网页代码放到apache下通过http协议访问,在iframe加载的时候调用如下js方法: 复制代码 代码如下: <SPANstyle="FONT-FAMILY:KaiTi_GB2312;FONT-SIZE:18px">functionSetWinHeight(obj) { varwin=o
-
iframe src为图片时的高度自适应的代码
对于iframe高度自适应的问题,网上已经被讨论n次了,一般通过在iframe加载完毕时访问iframe内页body的offsetHeight和offsetWidth然后更新iframe的高宽来实现. 今日遇到的自适应问题与以往有一些不同,这次的src是一张图片,而且是一张大小不确定的图片(从数据库取出来的数据生成的),在此使用以往的方式似乎就没有那么灵验了.突然想到img标记的高宽是可以获取到的.于是突然有了思路. 解决办法如下: 先动态生成一个img元素,在
-
iframe高度自适应及隐藏滚动条的实例详解
iframe高度自适应及隐藏滚动条的实例详解 在工作中,我们可能会遇到自己公司和其他的公司达成合作关系,从而共同开发某个项目.而这时候,我们可能就需要在自己的网站上嵌入别人做好的页面.而这种情况下,我们一般都会选择去使用iframe达到我们的目的.但是iframe用起来,真的是让人头痛,高度无法控制,难看的滚动条等等,下面我分享一下自己在处理iframe时的一些心得. 高度自适应 <iframe src="http://huichang.qunar.com/huiQunar" i
-
javascript 中iframe高度自适应(同域)实例详解
javascript 中iframe高度自适应(同域) 今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElementById("frame"); //frame是iframe的id if (document.getElementById) { if (iframeid && !window.opera) { if (iframei
-
jsp页面iframe高度自适应的js代码
以下操作写在body里面,form表单外 <iframe id="agentFrame" name="agentFrame" src="" width="0" height="0" style="display:none;" ></iframe> <script type="text/javascript"> function se
-
js实现iframe自动自适应高度的方法
本文实例讲述了js实现iframe自动自适应高度的方法.分享给大家供大家参考.具体如下: 在编写网页的时候,很多时候要用到自动伸缩iframe高度 ,假如ifram中嵌入的是一个列表,那么增加数据后,刷新列表,iframe高度会自动伸长.删除数据后,iframe高度要自动缩短. 将下一段代码拷贝到iframe所在那个html或者jsp页面.在</html>标签后,调用此函数即可. <script type="text/javascript"> autoAdjus
随机推荐
- centos 7下安装mysql(MariaDB)的教程
- mysql查询语句中用户变量的使用代码解析
- IE里button设置border:none属性无效解决方法
- 解析XPath语法之在C#中使用XPath的示例详解
- ACCESS转SQLSERVER数据库的注意事项
- JavaScript 面向对象的 私有成员和公开成员
- document.designMode的功能与使用方法介绍
- PHP基于自增数据如何生成不重复的随机数示例
- 使用C#的正则表达式验证中文字符(实例代码)
- python导入时小括号大作用
- silverlight实现图片局部放大效果的方法
- 实现UTF8转换GB2312国标码的asp代码
- 拯救你的数据 通过日志恢复MSSQL数据
- java如何对map进行排序详解(map集合的使用)
- Android中ContextMenu用法实例
- Python strip lstrip rstrip使用方法
- 磁盘配额的wmi版本(C#)
- 用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
- springboot 错误处理小结
- Vue函数式组件-你值得拥有