龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

javascript中兼容主流浏览器的动态生成iframe方法

时间:2014-05-08 10:20来源:网络整理 作者:采集侠 点击:
分享到:
这篇文章主要介绍了javascript中兼容主流浏览器的动态生成iframe方法,需要的朋友可以参考下

以下代码在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;
}

精彩图集

赞助商链接