这篇文章主要介绍了 JavaScript 实现 iframe 自动高度调整和不同主域名跨域, 作者通过建立一个代理来同步高度调整, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
大家都知道 Js 有同源策略,就是主域名不同嵌套的 iframe 不允许 Js 通信的。
比如我有一个网站,网站中要嵌入其网站的页面。那么我可以使用 iframe 引用第三方网站的地址即可。
但是问题也来的 iframe 的高度是固定的不能与第三方网站很好的融合,又例如第三方网站使用了瀑布流插件,要滚动加载自动计算高度,那么先说跨域:iframe 主域名不同跨域方法,假如网站 A.com B.com A 里面放入一个 iframe 引用了 B.com,这种情况下 B.com 里面的 Js 是无法访问到 A.com 的。JS 跨域必须是同源,就是同一个主域名,那肿么办呢?
我们可以在 B.com 中在引入一个 iframe,暂且叫 C 吧 这个 iframe 加载 A.com 中的一个网页。这样同源就有了 B.com 中的 iframe 中的网页就可以和 A.com 通讯了。下面只要 B 和 C 通讯,让 C 和 A 通讯就完成 B->A 通讯,这样当 B 高度变化时通知 C,让 C 通知 A 把 iframe 高度调整。
B 和 C 通讯,其实通过 url 地址就可以实现通讯了,B.com iframe 设置为隐藏,改变 src 地址时候 C 就可以接收。
废话不说了上代码
A.com/index.html
- <html>
- <script src="{$smarty.const.STATIC_URL}/js/jquery-1.7.1.min.js">
- </script>
- <script>
- var test = function() {
- $('#h1').html('test');
- }
- </script>
- <body>
- <h1 id="h1">
- nba.alltosun.net
- </h1>
- <iframe id="ifm" width="760" height="100" src="http://***.sinaapp.com/">
- </iframe>
- </body>
- </html>
B.com/index.html
- <html>
- <head>
- </head>
- <body>
- <h1>
- **.appsina.com
- </h1>
- <button id="button">
- 设置高度
- </button>
- <div id="div" style="height:200px;display:none;">
- </div>
- <script src="http://nba.alltosun.net/js/jquery-1.7.1.min.js">
- </script>
- <script>
- $(function() {
- window.ifrH = function(e) {
- var searchUrl = window.location.search;
- var b = null;
- var getParam = function(url, param) {
- var q = url.match(new RegExp(param + "=[^&]*")),
- n = "";
- if (q && q.length) {
- n = q[0].replace(param + "=", "");
- }
- return n;
- }
- var f = getParam(searchUrl, "url"),
- h = getParam(searchUrl, "ifmID"),
- k = getParam(searchUrl, "cbn"),
- g = getParam(searchUrl, "mh");
- var iframeId = 'testiframe';
- var iframe = document.getElementById(iframeId);
- var divId = 'alltosun';
- if (!iframe) {
- var iframe = document.createElement('iframe');
- iframe.id = iframeId;
- iframe.style.display = "none";
- iframe.width = 0;
- iframe.height = 0;
- document.body.appendChild(iframe);
- }
- if (e && e.type == "onload" && h) {
- b.parentNode.removeChild(b);
- b = null;
- }
- if (!b) {
- b = document.createElement("div");
- b.id = divId;
- b.style.CSSText = "clear:both;"document.body.appendChild(b);
- }
- var l = b.offsetTop + b.offsetHeight;
- iframe.src = (decodeURIComponent(f) || "http://*****/test2") + "&h=" + l + "&ifmID=" + (h || "ifm") + "&cbn=test" + "&mh=" + g + "&t=" + (( + new Date()));
- if (e && e.type == "onload") {
- window.onload = null;
- }
- }
- window.onload = function() {
- ifrH({
- type: "onload"
- });
- }
- // ifrH();
- $('button').click(function() {
- $('div').show();
- ifrH();
- })
- })
- </script>
- </body>
- </html>
C 代理文件
- <script>
- var search = window.location.search,
- getSearchParam = function (search, key) {
- var mc = search.match (new RegExp ( key + "=([^\&]*)") ),
- ret="";
- mc && mc.length && (ret = mc[0].replace( key + "=",""));
- return ret;
- },
- // 参数h
- h = getSearchParam(search,"h"),
- ifmID = getSearchParam(search,"ifmID"),
- cbn = getSearchParam(search,"cbn"),
- // 宽高
- mh = getSearchParam(search,"mh") || h,
- isFunction = function(fn){
- return !!fn && !fn.nodeName && fn.constructor != String
- && fn.constructor != RegExp && fn.constructor != Array
- && (/function/i).test(fn + "");
- };
- try{
- if(parent && parent.parent){
- ifm = parent.parent.document.getElementById(ifmID);
- ifm && mh && (ifm.height=mh);
- fn=parent.parent[cbn];
- isFunction(fn) && fn.call();
- ifm=null;
- }
- }catch(ex){
- console.log(ex);
- }
- </script>
来源: http://www.phperz.com/article/17/0222/266926.html