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 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 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
基于mysql的bbs设计(四)
2006/10/09 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
js实时监听文本框状态的方法
2011/04/26 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
举例详解Python中的split()函数的使用方法
2015/04/07 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
Django静态文件加载失败解决方案
2020/08/26 Python
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
旅游管理毕业生自荐书
2014/02/02 职场文书
青安岗事迹材料
2014/05/14 职场文书
工程材料采购方案
2014/05/18 职场文书
环保标语大全
2014/06/12 职场文书
护理医院见习报告
2014/11/03 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
Python基础之pandas数据合并
2021/04/27 Python