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

 更新时间:2013年08月09日 11:18:13   作者:  
自从[javascript]自定义MessageBox一文发布以后,很多网友都来信询问,如何在服务端调用ShowInfo方法,周末休息想了个折中的办法来实现
首先,我们应该可以先明确,为什么我们用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,有兴趣的朋友可以共同研究下。

相关文章

  • 用VsCode编辑TypeScript的实现方法

    用VsCode编辑TypeScript的实现方法

    这篇文章主要介绍了用VsCode编辑TypeScript的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • TypeScript使用函数重载确定返回类型的实现方法

    TypeScript使用函数重载确定返回类型的实现方法

    这篇文章主要介绍了TypeScript使用函数重载确定返回类型的实现方法,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-03-03
  • JS模仿腾讯图片站的图片翻页按钮效果完整实例

    JS模仿腾讯图片站的图片翻页按钮效果完整实例

    这篇文章主要介绍了JS模仿腾讯图片站的图片翻页按钮效果,涉及javascript动态操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)

    原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)

    大家经常看到网页里图片渐变显示,自己写一个。原理很简单就是修改元素的css透明度,具体实现代码如下,感兴趣的各位可以参考下哈,希望对大家有所帮助
    2013-06-06
  • 微信小程序实现点击生成随机验证码

    微信小程序实现点击生成随机验证码

    这篇文章主要为大家详细介绍了微信小程序实现点击生成随机验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • layui中使用jquery控制radio选中事件的示例代码

    layui中使用jquery控制radio选中事件的示例代码

    今天小编就为大家分享一篇layui中使用jquery控制radio选中事件的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • JavaScript编写猜拳游戏

    JavaScript编写猜拳游戏

    这篇文章主要为大家详细介绍了JavaScript编写猜拳游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • Javascript 计算字符串在localStorage中所占字节数

    Javascript 计算字符串在localStorage中所占字节数

    本文给大家分享的是使用Javascript 计算字符串在localStorage中所占字节数,分别对UTF-8和UTF-16两种编码进行了详细说明,有需要的小伙伴可以参考下。
    2015-10-10
  • JS实现的在线调色板实例(附demo源码下载)

    JS实现的在线调色板实例(附demo源码下载)

    这篇文章主要介绍了JS实现的在线调色板,可实现响应鼠标点击动态改变调色板颜色的功能,涉及JavaScript针对页面元素属性的动态操作与计算技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2016-03-03
  • 子窗口、父窗口和Silverlight之间的相互调用

    子窗口、父窗口和Silverlight之间的相互调用

    前两天做 silverlight 的东西,主页面打开一个子页面,然后子页面中包含一个 silverlight 应用程序那难免会涉及到他们三者相互调用的问题
    2010-08-08

最新评论