在服务端(Page.Write)调用自定义的JS方法详解


Posted in Javascript onAugust 09, 2013

首先,我们应该可以先明确,为什么我们用Page.Write把自定义的JS方法输出到页面上为什么IE不能识别,会出现“XXX未定义”的错误。原因很简单,因为我们用Page.Write输出的脚本是出现在页面的最顶端。IE读到是javascript函数的时候,就开始执行,但是此时我们link的js文件并未被IE读入,所以IE无法识别我们定义在js文件里面的方法。那write alert为什么可以呢?因为alert是IE内嵌的脚本功能函数,不管有没有页面,IE都认得它。
找到问题所在,自然就好解决了:
1、把我们自定义的方法内嵌到IE里面。 ---> 看起来有点异想天开,呵呵
2、等页面载入完成后再触发事件。 --->触发事件,没错。
如何知道页面是否载入完成呢?
1、通过document的状态
2、通过事件触发(windows.onload)
第一种好像比较不保险,有时候明明已经全部载完了,它还是一直显示在传送数据(FF此情况最明显),所以还是用事件比较保险一点。
定义一个简单方法,挂载到windows.onload里面,执行的时候做一个标识

var loadComplete = false;
function LoadCompleted()
{
loadComplete= true;
}
window.attachEvent("onload",LoadCompleted);

呵呵,这样我们只要通过判断loadComplete来取得页面是否载入完毕了。
var mImgdir = "";
var mCaption = "caption";
var mMsg = "Message";
var mOkClick= null;
function ShowMessage(imgdir,caption,msg,OkClick)
{
if(loadComplete)
{
KMessageBox.ShowInfo(mImgdir,mCaption,mMsg,mOkClick);
}
}

这样子在loadComplete未false的情况下,我们就不会去执行KMessageBox.ShowInfo()方法,只然就不会出现JS错误提示了。
单单这样子,还不行,因为输出的这样的脚本,IE只在输出页面的时候执行了一次,但是此时loadComplete=false,所以,我们需要定时检测页面是否载入完毕。说到定时,只然是祭出setTimeout & setInterval. 我们这里需要不停的检测,故使用setInterval方法。最终代码如下:
var loadComplete = false;
var mImgdir = "";
var mCaption = "caption";
var mMsg = "Message";
var mOkClick= null;
var timerID;
function ShowMessage(imgdir,caption,msg,OkClick)
{
if(loadComplete)
{
KMessageBox.ShowInfo(mImgdir,mCaption,mMsg,mOkClick);
     //卸载此事件     window.detachEvent("onload",function(){LoadCompleted;});     //停止定时触发
     window.clearInterval(timerID); 
    } 
}
function LoadCompleted() { loadComplete=true; }
window.attachEvent("onload",LoadCompleted);
//设置定时检测机制
timerID = window.setInterval(ShowMessage,1);

当然以上代码只兼容IE,因为使用attachEvent 和 detachEvent,至于让他兼容其他浏览器可以参看[JavaScript]自定义Title的显示方式一文中的处理方式:
if(!document.attachEvent)//Not IE
{
document.attachEvent = function(){document.addEventListener(arguments[0].substr(2),arguments[1],arguments[2])}
}
if(!window.attachEvent)//Not IE
{
window.attachEvent = function(){window.addEventListener(arguments[0].substr(2),arguments[1],arguments[2])}
}
 

在服务端,只要StringBuilder出以上的脚本,然后Write出来就可以了。上面也只是提供了一种思路,当然还会有其他的办法,比如我不适用定时检测,我直接挂载到windows.onload里面,让页面自动监听,自动执行,也未尝不可:),正所谓条条大路通罗马嘛~~~~~
以上思路来自yui,并且yui实现了一个更漂亮的自定义MessageBox,有兴趣的朋友可以共同研究下。
Javascript 相关文章推荐
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 #Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 #Javascript
jquery 实现上下滚动效果示例代码
Aug 09 #Javascript
15条JavaScript最佳实践小结
Aug 09 #Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 #Javascript
html向js方法传递参数具体实现
Aug 08 #Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 #Javascript
You might like
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
用Python编写一个国际象棋AI程序
2014/11/28 Python
Python中的集合类型知识讲解
2015/08/19 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
Windows下安装Scrapy
2018/10/17 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
详解python 内存优化
2020/08/17 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
办公室文秘自我鉴定
2013/09/21 职场文书
教师党员公开承诺书
2014/03/25 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
导师鉴定意见
2015/06/05 职场文书
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js