在服务端(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 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
Jun 24 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
Vue实现购物车场景下的应用
Nov 27 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 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
PHP中Memcache操作类及用法实例
2014/12/12 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
python3中的md5加密实例
2018/05/29 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
铭万公司.net面试题笔试题
2014/07/20 面试题
大学生蛋糕店创业计划书
2014/01/13 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
火锅店的活动方案
2014/08/15 职场文书
2014年德育工作总结
2014/11/20 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
工作简报格式范文
2015/07/21 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
转变工作作风心得体会
2016/01/23 职场文书