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 相关文章推荐
让IE6支持min-width和max-width的方法
Jun 25 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 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 magic_quotes_gpc的使用方法详解
2013/06/24 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
用JS剩余字数计算的代码
2008/07/03 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
使用python解析xml成对应的html示例分享
2014/04/02 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
pyqt5自定义信号实例解析
2018/01/31 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
Python初学者常见错误详解
2019/07/02 Python
python多线程扫描端口(线程池)
2019/09/04 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
python中if及if-else如何使用
2020/06/02 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
优秀的教师个人的中文求职信
2013/09/21 职场文书
房地产广告词大全
2014/03/19 职场文书
经管应届生求职信范文
2014/05/18 职场文书
销售员态度差检讨书
2014/10/26 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
党员个人总结范文
2015/02/14 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书