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 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
js中判断控件是否存在
Aug 25 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 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命名空间学习详解
2014/02/27 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
JavaScript浏览器选项卡效果
2010/08/25 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
django迁移文件migrations的实现
2020/03/31 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
警告通知
2015/04/25 职场文书
预备党员介绍人意见
2015/06/01 职场文书
结婚典礼主持词
2015/06/29 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers