在服务端(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 相关文章推荐
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
js中的数组对象排序分析
Dec 11 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 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解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
Python中的各种装饰器详解
2015/04/11 Python
python传递参数方式小结
2015/04/17 Python
Python表示矩阵的方法分析
2017/05/26 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
python根据多个文件名批量查找文件
2019/08/13 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
出纳岗位职责模板
2013/11/27 职场文书
求职自荐信范文格式
2013/11/29 职场文书
学校消防安全责任书
2014/07/23 职场文书
2014年教务工作总结
2014/12/03 职场文书
学校2014年度工作总结
2014/12/06 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书