zoukankan      html  css  js  c++  java
  • showModalDailog 兼容

    需求

    在很久很久以前的代码上,使用了showModalDailog来实现模态窗体。突然老大发现网站只在ie上好使了,就让排查问题,结果一看,除了ie,其他大佬好像都不支持这玩意了,满满的绝望,需求来了:在尽量不动源代码的基础上实现其他浏览器的兼容

    解决方案

    先搜索

    Chrome浏览器showModalDialog兼容性及解决方案

    ShowModalDialog Polyfill这个是搜了很久很久才在一篇不是太起眼的blog中发现的,博主也是搜了半天,后来FQ上了谷歌,才发现其实早就有人实现了这个兼容了。也是一番感叹。原谅我忘了博客地址了,只记得收藏方案了。

    后来,用了第二种方式来实现兼容,在过程中也遇到了一些问题,主要的就是回调
    因为项目太老 回调就只能用eval了
    看一眼,相关代码,这就意味着 对原调用方法的书写就有一定要求,这个改了很久,这个就得具体情况具体分析了,不多说了、

    相关代码:

    //if using eval
            var isNext = false;
            var nextStmts = caller.split('
    ').filter(function(stmt) {
                if(isNext || stmt.indexOf('showModalDialog(') >= 0)
                    return isNext = true;
                return false;
            });
            dialog.addEventListener('close', function() {
                var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
                document.body.removeChild(dialog);
                nextStmts[0] = nextStmts[0].replace(/(window.)?showModalDialog(.*)/g, JSON.stringify(returnValue));
                eval('{
    ' + nextStmts.join('
    '));
    });
    
  • 相关阅读:
    DOM的重点核心
    window的Navigator 对象
    meta标签的http-equiv与content解析
    深拷贝与浅拷贝
    web安全CSRF和XSS
    同源策略与跨域问题
    instanceof与constructor的区别
    javascript原型对象与原型链
    Dom事件
    CSS盒模型的介绍
  • 原文地址:https://www.cnblogs.com/prayol/p/8507971.html
Copyright © 2011-2022 走看看