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关于select的相关操作说明
Jan 13 Javascript
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
最短的IE判断代码
Mar 13 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
php过滤危险html代码
2008/08/18 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
php eval函数一句话木马代码
2015/05/21 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Python中pygame安装方法图文详解
2015/11/11 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
Python实现excel转sqlite的方法
2017/07/17 Python
python 堆和优先队列的使用详解
2019/03/05 Python
python创建子类的方法分析
2019/11/28 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
室内设计自我鉴定
2013/10/15 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
和睦家庭事迹
2014/05/14 职场文书
普通话宣传标语
2014/06/26 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
开会通知
2015/04/20 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python