在服务端(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 相关文章推荐
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
jquery validate表单验证插件
Sep 06 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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宇宙的又一超级大烂片
2020/04/09 欧美动漫
支持oicq头像的留言簿(一)
2006/10/09 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
北京振戎融通Java面试题
2015/09/03 面试题
工程师岗位职责
2013/11/08 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
数学教学随笔感言
2014/02/17 职场文书
债务纠纷委托书
2014/08/30 职场文书
优秀大学生自荐信
2015/03/26 职场文书
雨中的树观后感
2015/06/03 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
python 常用的异步框架汇总整理
2021/06/18 Python
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL