设置跨域的iframe的高度
原因
如下图,A域中有个B域的页面,但是B的页面的长度不确定,A无法去设置一个准确的高度。
PS:iframe高度设置auto是无效的
解决办法
如上图,
(1)在B页面中加一个A的代理页面的iframe
PS:这最里面的A页面能调用最外层A页面的方法,而B页面是调用不了最外层A的(因为跨域的安全限制)。
(2)当B页面加载完成时,修改A的agent.html所在iframe里src。
setTimeout(function(){
var _height = $("#vs-source").height();
var b_iframe = document.getElementById("crossdomain_agent_iframe"); //agent.html的iframe的id if( b_iframe ){ var src = b_iframe.src.split("#")[0] ;
src = src.split("?")[0] ;
b_iframe.src =src+"?"+new Date().getTime()+"#"+(b_height+(_height-1000));
}
},200) ;
(3)agent.html代码调用最外层A页面代码设置B页面高度
agent.html代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>frame agent</title></head>
<body>
<script type="text/javascript">
function pseth() {
var win = parent.parent ;
var hashHeight = window.location.hash;
var tabId = win.$(".ui-tabs-selected:last").find("a").attr("tabid");
var iframe = win.$("#"+tabId).find("iframe")[0] ;
win._setIFrameHeight && win._setIFrameHeight(iframe,hashHeight.split("#")[1]) ;
}
pseth();
</script>
</body>
</html>
弊端
1.B页面需要做修改,加一个iframe和主动设置一次。
PS:很多时候B页面是第三方的页面,这也是没办法的,需要弄的
设置跨域的iframe的高度的更多相关文章
- 跨域的iframe自动调整高度(cross-domain iframe resizer)
可以使用iframe-resizer项目地址: http://davidjbradshaw.github.io/iframe-resizer/演示地址: http://davidjbradshaw.c ...
- 跨域引入iframe 自适应高度
最近和别的公司合作一个项目,需要从他们那边引入一个页面,刚开始想的挺简单的,用iframe 引入就好啦,可是操作中才发现,自适应的问题不好解决,试了挺多办法,最终找到一个比较好的方法,记录一下,留着备 ...
- nodejs设置跨域访问
//设置跨域访问app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", ...
- 如何实现跨域获取iframe子页面动态的url
有的时候iframe的子页面会动态的切换页面,我们在父页面通过iframe1.contentWindow.window.location只能获取同源的子页面的信息.获取跨域的子页面信息会报错. 这时可 ...
- ASP.NET MVC中设置跨域
ASP.NET MVC中设置跨域 1.什么是跨域请求 js禁止向不是当前域名的网站发起一次ajax请求,即使成功respone了数据,但是你的js仍然会报错.这是JS的同源策略限制,JS控制的并不是我 ...
- proxyTable设置跨域
如何设置跨域 1.在config--index.js 中配置 proxyTable: { '/api': { target: 'http://www.xxx.com', //目标接口域名 change ...
- 谷歌浏览器和火狐浏览器设置跨域和https、http混用 Chrome
谷歌浏览器和火狐浏览器设置跨域和https.http混用 Chrome 添加启动项: 右键点击Chrome快捷方式,在目标一栏后添加启动项 允许跨域: --disable-web-securit ...
- 阿里云OSS设置跨域访问
OSS 提供 HTML5 协议中的跨域资源共享 CORS 设置,帮助您实现跨域访问.当 OSS 收到一个跨域请求(或者 OPTIONS 请求)时,会读取存储空间对应的 CORS 规则,然后进行相应的权 ...
- js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域
js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...
随机推荐
- java中Comparable实现对象的比较
/* class A implements Comaprable<A>{ } 那么 A x = new A(); 类关系图 Object o = A; Object Comparable ...
- Floyd算法(三)之 Java详解
前面分别通过C和C++实现了弗洛伊德算法,本文介绍弗洛伊德算法的Java实现. 目录 1. 弗洛伊德算法介绍 2. 弗洛伊德算法图解 3. 弗洛伊德算法的代码说明 4. 弗洛伊德算法的源码 转载请注明 ...
- Quartz Java resuming a job excecutes it many times--转
原文地址:http://stackoverflow.com/questions/1933676/quartz-java-resuming-a-job-excecutes-it-many-times Q ...
- 【GIT】Github上传本地代码详解
本教程结合Github服务端和客户端完成本地代码上传至Github,下面进行详细讲解: 1.创建Github账号,这一个步骤应该不用太多解释,直接上官网进行注册登录即可https://github.c ...
- CentOS7 Java安装
CentOS7 Java安装 CentOS7 Java安装 Download 从Oracle下载jdk-8u31-linux-x64.rpm Install 御载 执行如下命令 java -versi ...
- Theano入门神经网络(二) 实现一个XOR门
与非门的图片如下 示意图 详细解释: 1 定义变量的代码,包括了输入.权值.输出等.其中激活函数采用的是sigmod函数 # -*- coding: utf-8 -*- __author__ = 'A ...
- UWP开发入门(二十三)——WebView
本篇讨论在UWP开发中使用WebView控件时常见的问题,以及一些小技巧. WebView是实际开发中常用的控件,很多大家抱怨的套网页的应用都是通过WebView来实现的.这里要澄清一个问题,套网页的 ...
- Hyperledger区块数据的访问
简介 本文介绍了访问Hyperledger区块数据的几种方法. REST API Hyperledger提供了多个REST API (https://hyperledger-fabric.readth ...
- 实现ASP.NET无刷新下载并提示下载完成
先上代码,后面再进行说明. 以下是前端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehi ...
- MVC的控制器的激活过程,我们从MvcHandler开始讲,前面的事情以后再讲
一.从MvcHandler开始(不要觉得是代码,让你看懂才是最重要的) using Microsoft.Web.Infrastructure.DynamicValidationHelper; usin ...