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下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 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的简易冒泡法代码分享
2012/08/28 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
php常用hash加密函数
2014/11/22 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
python二分法实现实例
2013/11/21 Python
Python中的is和id用法分析
2015/01/26 Python
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
Python地图绘制实操详解
2019/03/04 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
C语言开发工程师测试题
2016/12/20 面试题
企事业单位求职者的自我评价
2013/12/28 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
篮球拉拉队口号
2015/12/25 职场文书
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电