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 相关文章推荐
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
微信小程序实现日历效果
Dec 28 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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实现下载文件的两种方法
2013/07/05 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
python读写json文件的简单实现
2017/04/11 Python
python图书管理系统
2020/04/05 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
深入了解Python enumerate和zip
2020/07/16 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
说明书怎么写
2014/05/06 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
小学工作总结2015
2015/05/04 职场文书
使用springMVC所需要的pom配置
2021/09/15 Java/Android