1。引入的跨域文件content.html
内容:
<html>
<head>
<title>content</title>
<script type="text/javascript" src="http://www.king.com/demo/iframe.js"></script>
</head>
<body>
<p>1</p>
<p>2</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
</body>
</html>
2。主页面main.html
<html>
<head>
<title>main</title>
</head>
<body>
<iframe id="content" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" src="http://www.king.com/demo/content.html"></iframe>
</body>
</html>
3。跨域文件要引入的js文件iframe.js
window.onload = function() {
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = "http://www.jinxin.com/demo/proxy.html?width=" + document.body.scrollWidth + "&" + "height=" + document.body.scrollHeight;
document.getElementsByTagName("body")[0].appendChild(iframe);
}
4。跨域用于代理的页面proxy.html
<html>
<head>
<title>proxy</title>
</head>
<body>
<script>
var query = location.search.substring(1).split("&");
for (var i = 0; i < query.length; i++) {
var param = query[i].split("=");
switch (param[0]) {
case "width":
parent.parent.document.getElementById("content").width = param[1];
break;
case "height":
parent.parent.document.getElementById("content").height = param[1];
break;
}
}
</script>
</body>
</html>
内容:
<html>
<head>
<title>content</title>
<script type="text/javascript" src="http://www.king.com/demo/iframe.js"></script>
</head>
<body>
<p>1</p>
<p>2</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
<p>5</p>
</body>
</html>
2。主页面main.html
<html>
<head>
<title>main</title>
</head>
<body>
<iframe id="content" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" src="http://www.king.com/demo/content.html"></iframe>
</body>
</html>
3。跨域文件要引入的js文件iframe.js
window.onload = function() {
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = "http://www.jinxin.com/demo/proxy.html?width=" + document.body.scrollWidth + "&" + "height=" + document.body.scrollHeight;
document.getElementsByTagName("body")[0].appendChild(iframe);
}
4。跨域用于代理的页面proxy.html
<html>
<head>
<title>proxy</title>
</head>
<body>
<script>
var query = location.search.substring(1).split("&");
for (var i = 0; i < query.length; i++) {
var param = query[i].split("=");
switch (param[0]) {
case "width":
parent.parent.document.getElementById("content").width = param[1];
break;
case "height":
parent.parent.document.getElementById("content").height = param[1];
break;
}
}
</script>
</body>
</html>
发表评论
-
js url转码
2014-06-13 11:46 3931.var target = encodeURI('中文'); ... -
js生成表格
2014-02-25 10:34 0var row=document.getElementById ... -
让输入框只显示数字
2014-02-25 10:32 0<input type="text" ... -
限制网页刷新f5/ctrl+R/右键
2014-02-25 10:30 0<body onkeydown="KeyDow ... -
窗口传值问题
2014-02-25 10:29 0子窗口应该是用window.showModalDialog() ... -
js调用父框架函数与弹窗调用父页面函数的方法--转
2014-02-25 10:24 0js弹窗页面后调用父页面函数 (例如:调用父页面函数test2 ... -
js ajax请求
2014-02-25 10:23 0var req; function xmjlSubmitVi ... -
js 正则表达式 邮箱、字符串、URL格式匹配
2014-02-25 10:19 1761邮箱: var regm = /^[a-zA-Z0-9_-]+ ... -
解决js url传递中文乱码
2014-02-25 10:11 533传递url中汉字用encodeURIComponent()转换 ... -
返回到跳转页面
2014-02-24 17:43 296<a href='javascript:history. ... -
半角逗号转全角
2014-02-24 17:42 748str = str.replace(/,/g,",& ... -
j调试用于打印错误
2014-02-24 17:42 367try { sucainame=document.getEle ... -
滚动效果--转
2014-02-24 17:41 314<html xmlns="http://www ... -
jquery获得鼠标坐标
2014-02-24 17:37 364clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐 ...
相关推荐
iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板
可以实现Iframe跨域自适应高度 main.htm和agent.htm文件放在www.a.com域内 iframe.htm放在www.b.com域内 这样就可以通过a.com域中的main.htm文件访问b.com域中的iframe.htm文件了
iframe跨域嵌套自适应高度 iframe跨域嵌套 丢失session值(针对嵌套asp.net 做的网站)
这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
iframe 跨域 自动适应高度;iframe 跨域 自动适应高度;
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。
有个在线例子,访问地址:http://okiner.cn/demo/cross-domain/iframe.html,这是源码,方便下载
最近在做项目中,遇到一个问题,就是iframe高度的自适应问题,以下是解决办法
有个在线例子,访问地址:http://okiner.cn/demo/cross-domain/iframe.html,这是源码,方便下载
介绍: 填写的嵌入地址一定要和本页面在同一个站点上,否则会提示“拒绝访问!”。对跨域引用有权限问题,请查阅其他资料。
Iframe自适应高度一直都备受关注,接下来为大家介绍下同域名下Iframe自适应高度的处理以及跨域时Iframe高度自适应,感兴趣的朋友可以参考下哈
前几天做公司和开心网合作项目的时候 碰到iframe 跨域自适应的问题刚开始很迷惑 开心网那边技术工程师给我发了一段这样子的代码。
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引 发出同域、跨域两种情况。 同域时Iframe高度自适应 下面的代码兼容IE/Firefox浏览器,控制id为...
www.baidu.com,假设地址:http://www.baidu.com/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小....
iframe的高度需要根据子页面的实际高度来进行调整,但是如果子页面不在同一域中怎么办?这时候脚本没有办法获取到子页面的高度,存在JavaScript跨域的问题
NULL 博文链接:https://cjb.iteye.com/blog/406466
关于iframe之间的通信问题与自适应高度问题网上有很多,那么这篇文章小编也和大家一起来谈谈iframe之间通信问题及iframe自适应高度问题,有需要的可以参考借鉴。