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 BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
JS的get和set使用示例
Feb 20 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
php无序树实现方法
2015/07/28 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
Python编写登陆接口的方法
2017/07/10 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
深入浅析python的第三方库pandas
2020/02/13 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
元旦晚会邀请函
2014/01/27 职场文书
文明村镇申报材料
2014/05/06 职场文书
信息管理专业自荐书
2014/06/05 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
谢师宴答谢词
2015/01/05 职场文书
出国留学导师推荐信
2015/03/26 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
《藏戏》教学反思
2016/02/23 职场文书