类 web components 思想原生解决方案

代码参考
https://github.com/yozman/flyinn/issues/12#issuecomment-131292931
(function (window) {

    /***
     * 执行入口
     */
    window.onload = function () {
        打补丁();
        初始化();
    };

    /***
     *  修复并扩展使用 iframe 带来的一些兼容问题
     *  1. iframe 宽高问题
     *  2. 超链接点击问题
     *  3. 一个结构多个样式问题
     */
    function 打补丁() {
        设置宽高();
        设置链接();
        设置样式();
    }

    /***
     *  给框架设置固定宽高
     *  需要设计师配合提供准确的数值
     *  优先级为: iframe(外部) > body(内部) > 100%(默认值)
     */
    function 设置宽高() {
        var aFrame = document.getElementsByTagName('iframe');
        for (var i = 0; i < frames.length; i++) {
            var iFrame = frames[i].document.body;
            "width height".replace(/\w+/g, function (s) {
                aFrame[i].style[s] = aFrame[i][s] || iFrame.getAttribute(s) || '100%';
            });
            aFrame[i].style.display = 'block';
        }
    }

    /***
     *  修复超链接在框架内跳转的问题
     */
    function 设置链接() {
        var aA = document.getElementsByTagName('a');
        for (var i = 0; i < aA.length; i++) {
            aA[i].onclick = function () {
                if (this.href) {
                    top.location = this.href;
                    return false;
                }
            };
        }
    }

    /***
     *  解决一个结构多个样式问题
     *  利用地址 hash 给 body 添加相应的 class
     */
    function 设置样式() {
        location.hash.length > 1 && (
            document.body.className += ' ' + location.hash.substring(1)
        );
    }

    /***
     *  初始化
     */
    function 初始化() {
        var aFrame = document.getElementsByTagName('iframe');
        for (var i = 0; i < frames.length; i++) {
            aFrame[i].innerHTML && (
                frames[i].arguments = eval('(' + aFrame[i].innerHTML + ')')
            );
            frames[i].main && frames[i].main(frames[i].arguments);
        }
        self == top && self.main && self.main();
    }

})(window);
基于 iframe 实现的