javascript中兼容主流浏览器的动态生成iframe方法


Posted in Javascript onMay 05, 2014

以下代码在IE8下运行通过,在IE9中出错:

document.createElement('<iframe id="yige-org-iframe" src="yige.org.logo.gif" style="position:absolute;top:0;left:0;width:1px;height:1px;visibility:hidden;"></iframe>');

错误提示:exception : SCRIPT5022: DOM Exception: INVALID_CHARACTER_ERR (5)

思路分析:
第一步:兼容IE9,firefox,Opera,Safari等浏览器;

var iframe = document.createElement("iframe");
iframe.setAttribute("id", "yui-history-iframe");
iframe.setAttribute("src", "../../images/defaults/transparent-pixel.gif");
iframe.setAttribute("style","position:absolute;top:0;left:0;width:1px;height:1px;visibility:hidden;");

第二步:兼容IE6-8:由于ie6-8 不能修改iframe的name属性

var oFrame = isIE ? document.createElement("<iframe name=/"" + this._FrameName + "/">") : document.createElement("iframe");
oFrame.name = "iframName";

综合解决办法:

var isIE = (document.all) ? true: false; //这里仅仅简单的对是否是IE进行判断,详细浏览器判断:请参考浏览器类型侦测
var ua = navigator.userAgent.toLowerCase().match(/msie ([/d.] + ) / )[1];
if (ua == "9.0") {
    isIE = false;
}
var oFrame = isIE ? document.createElement("<iframe name=/"" + this._FrameName + " / ">") : document.createElement("iframe");oFrame.name = "iframName";
//=========================
function ajaxpost(formid, showid, waitid, showidclass, submitbtn, recall) {
    var waitid = typeof waitid == 'undefined' || waitid === null ? showid : (waitid !== '' ? waitid : '');
    var showidclass = !showidclass ? '' : showidclass;
    var ajaxframeid = 'ajaxframe';
    var ajaxframe = $(ajaxframeid);
    var formtarget = $(formid).target;
    var handleResult = function() {
        var s = '';
        var evaled = false;
        showloading('none');
        try {
            s = $(ajaxframeid).contentWindow.document.XMLDocument.text;
        } catch (e) {
            try {
                s = $(ajaxframeid).contentWindow.document.documentElement.firstChild.wholeText;
            } catch (e) {
                try {
                    s = $(ajaxframeid).contentWindow.document.documentElement.firstChild.nodeValue;
                } catch (e) {
                    s = '内部错误,无法显示此内容';
                }
            }
        }
        if (s != '' && s.indexOf('ajaxerror') != -1) {
            evalscript(s);
            evaled = true;
        }
        if (showidclass) {
            $(showid).className = showidclass;
            if (submitbtn) {
                submitbtn.disabled = false;
            }
        }
        if (!evaled && (typeof ajaxerror == 'undefined' || !ajaxerror)) {
            ajaxinnerhtml($(showid), s);
        }
        ajaxerror = null;
        if ($(formid)) $(formid).target = formtarget;
        if (typeof recall == 'function') {
            recall();
        } else {
            eval(recall);
        }
        if (!evaled) evalscript(s);
        ajaxframe.loading = 0;
        $('append_parent').removeChild(ajaxframe);
    };
    if (!ajaxframe) {
        try {
            ajaxframe = document.createElement('<iframe name="' + ajaxframeid + '" id="' + ajaxframeid + '"></iframe>');
        } catch (e) {
            ajaxframe = document.createElement('iframe');
            ajaxframe.name = ajaxframeid;
            ajaxframe.id = ajaxframeid;
        }
        ajaxframe.style.display = 'none';
        ajaxframe.loading = 1;
        $('append_parent').appendChild(ajaxframe);
    } else if (ajaxframe.loading) {
        return false;
    }
    _attachEvent(ajaxframe, 'load', handleResult);
    showloading();
    $(formid).target = ajaxframeid;
    $(formid).action += '&inajax=1';
    $(formid).submit();
    return false;
}
Javascript 相关文章推荐
JavaScript 变量基础知识
Nov 07 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
小程序实现侧滑删除功能
Jun 25 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 #Javascript
一个简单的jquery的多选下拉框(自写)
May 05 #Javascript
JavaScript日期时间格式化函数分享
May 05 #Javascript
js中substring和substr的定义和用法
May 05 #Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 #Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 #Javascript
js简单的弹出框有关闭按钮
May 05 #Javascript
You might like
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
PHP检测用户语言的方法
2015/06/15 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
使用正则替换变量
2007/05/05 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
python字符串编码识别模块chardet简单应用
2015/06/15 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
python异步Web框架sanic的实现
2020/04/27 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
饲料采购员岗位职责
2013/12/19 职场文书
2014年高三毕业生自我评价
2014/01/11 职场文书
中医临床专业自我鉴定范文
2014/01/15 职场文书
网上卖盒饭创业计划书范文
2014/02/07 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
治庸问责工作总结
2015/08/11 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python