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中JSON.parse的影响概述
Jul 17 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
JSON stringify方法原理及实例解析
Oct 23 Javascript
JS如何监听div的resize事件详解
Dec 03 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测试程序运行时间的类
2012/02/05 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
python复制文件代码实现
2013/12/23 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
python调用其他文件函数或类的示例
2019/07/16 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
jupyter notebook清除输出方式
2020/04/10 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
P/Invoke是什么
2015/07/31 面试题
建筑行业的大学生自我评价
2013/12/08 职场文书
大学生职业生涯规划范文
2013/12/31 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
入党自传范文2015
2015/06/26 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
JUnit5常用注解的使用
2021/07/02 Java/Android