前段时间开发的一个业务系统，需要将其对接嵌入到统一的工作平台中。

其主要目标是：

1、在新窗口打开工作区域（弹出新页面）；

2、避免用户直观的看到页面传递的参数，也就是隐藏URL。

当然，没有其他复杂的要求，所以怎么简单怎么来。本文采用了最简易、实用的办法：嵌入iframe。

关于iframe的好处和坏处，网上已有很多比较全面的解释。这篇文章有比较详细、全面的介绍：

这里再次熟悉一下iframe的常用属性：

1.frameborder:是否显示边框，1(yes),0(no)2.height:框架作为一个普通元素的高度，建议在使用css设置。3.width:框架作为一个普通元素的宽度，建议使用css设置。4.name:框架的名称，window.frames[name]时专用的属性。5.scrolling:框架的是否滚动。yes,no,auto。6.src：内框架的地址，可以使页面地址，也可以是图片的地址。7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持8.sandbox: 对iframe进行一些列限制，IE10+支持

对于1中的要求应该是最直观来的，首先就是open一个静态的html页面，open的时候塞入要传入的参数，此处主要为url，

因为比较简单，直接上代码了：

function redirectToPage(pgurl)        {            window.open("/index.html?"+ compileStr("IFRAMESRC") + "=" + compileStr(pgurl), "_blank");        }

接下来就是处理该index.html静态页面了，也就是2中提及的要求，需要一些具体的处理逻辑。

首先，index.html静态页面需要包括一个单纯的iframe，如

当然，还需要页面加载之后resize一下iframe的大小，具体代码如下：

$(document).ready(function () {        var iframeHeight = function () {            var _height = $(window).height() -1;            $('#content').height(_height);        }        window.onresize = iframeHeight;        $(function () {            iframeHeight();        });        //此处获取传入的url，并设置iframe的src值　　        $('#content').attr('src', getIFRAMESRC());    });

其次就是上面代码注释处的写法了，上处 getIFRAMESRC()方法就比较有趣了，但可操作性太多。不在此一一阐述。文章最后我会给出最简单的示例。　　

具体玩法就是根据open的静态页面带入的参数值进行获取和解析，至于怎么传，自定义加个密，编个码都可以，要是意犹未尽，甚至加个随机token也行！总的来说，就是不要太赤裸裸的暴露url地址，这也是此文的初衷。

 

总结：本文的技术要求不高，但实现方式较多。本文采取了一种最常见的办法实现。希望抛砖引玉~

 

 

下面是getIFRAMESRC()的简易实现代码：

//简单的字符串加密function compileStr(code) {                    var c = String.fromCharCode(code.charCodeAt(0) + code.length);            for (var i = 1; i < code.length; i++) {                c += String.fromCharCode(code.charCodeAt(i) + code.charCodeAt(i - 1));            }            return escape(c);        }//简单的对应字符串解密           function uncompileStr(code) {            code = unescape(code);            var c = String.fromCharCode(code.charCodeAt(0) - code.length);            for (var i = 1; i < code.length; i++) {                c += String.fromCharCode(code.charCodeAt(i) - c.charCodeAt(i - 1));            }            return c;        }        function getIFRAMESRC()        {            var search = location.search.slice(1);            var arr = search.split("&");            for (var i = 0; i < arr.length; i++) {                var ar = arr[i].split("=");                if (uncompileStr(ar[0]) == 'IFRAMESRC') {                    if (unescape(ar[1]) == 'undefined') {                        return "";                    } else {                        return uncompileStr(unescape(ar[1]));                    }                }            }            return "";        }