在服务端(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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
vue axios用法教程详解
Jul 23 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 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 显示客户端IP与服务器IP的代码
2010/10/12 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
javascript制作的滑动图片菜单
2015/05/15 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
js中null与空字符串""的区别讲解
2019/01/17 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
详解python深浅拷贝区别
2019/06/24 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
初婚未育证明
2014/01/15 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
写求职信有什么意义
2014/02/17 职场文书
小学三年级学生评语
2014/04/22 职场文书
大学生见习报告范文
2014/11/03 职场文书
土建施工员岗位职责
2015/04/11 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
nginx请求限制配置方法
2021/07/09 Servers