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的掌握程度的代码
Dec 09 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 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
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
php无限极分类实现方法分析
2019/07/04 PHP
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
Python查找相似单词的方法
2015/03/05 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
python list格式数据excel导出方法
2018/10/31 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
利用python进行文件操作
2020/12/04 Python
毕业自我评价范文
2013/11/17 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
质量保证书范本
2014/04/29 职场文书
校园绿化美化方案
2014/06/08 职场文书
企业文化宣传标语
2014/06/09 职场文书
IT工程师岗位职责
2014/07/04 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
Go语言基础知识点介绍
2021/07/04 Golang