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通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
php 注释规范
2012/03/29 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
php判断表是否存在的方法
2015/06/18 PHP
PHP如何将XML转成数组
2016/04/04 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
德国网上宠物店:Zoobio
2018/05/23 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
报关简历自我评价怎么写
2013/09/19 职场文书
前台文员岗位职责
2013/12/28 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
父母对孩子说的话
2014/04/12 职场文书
工作检讨书怎么写
2015/01/23 职场文书
健康证明
2015/06/19 职场文书