分享：将业务系统页面嵌入到统一平台中（简易版）

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

其主要目标是：

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，如

<div id="container" style="overflow:hidden;">
        <iframe border="0" id="content" src="" frameborder="0" height="100%" width="100%"></iframe>
    </div>

当然，还需要页面加载之后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 "";
        }