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中获取元素索引的函数
Sep 10 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
JS常用算法实现代码
Nov 14 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
vue的for循环使用方法
Feb 12 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 Javascript
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
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
function.inc.php超越php
2006/12/09 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
js date 格式化
2017/02/15 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
python绘制规则网络图形实例
2019/12/09 Python
Python阶乘求和的代码详解
2020/02/14 Python
python批量生成条形码的示例
2020/10/10 Python
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
常见的软件开发流程有哪些
2015/11/14 面试题
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
小学家长学校培训材料
2014/08/24 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
如何使用pdb进行Python调试
2021/06/30 Python
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL