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 相关文章推荐
JS中==与===操作符的比较
Mar 21 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
node+vue实现文件上传功能
May 28 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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远程调试之XDEBUG
2015/12/29 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
Firefox div高度自适应
2009/04/28 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
jquery下json数组的操作实现代码
2010/08/09 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
python计数排序和基数排序算法实例
2014/04/25 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
Pyqt5实现英文学习词典
2019/06/24 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
区域总监的岗位职责
2013/11/21 职场文书
高一物理教学反思
2014/01/24 职场文书
技术比武方案
2014/05/19 职场文书
创新社会管理心得体会
2014/09/12 职场文书
在人间读书笔记
2015/06/30 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
golang中的空slice案例
2021/04/27 Golang
Python基础之元组与文件知识总结
2021/05/19 Python
MySQL创建管理KEY分区
2022/04/13 MySQL