在服务端(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 相关文章推荐
jQuery阻止同类型事件小结
Apr 19 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
关于Vue Router的10条高级技巧总结
May 06 Vue.js
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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
php实现cookie加密的方法
2015/03/10 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
如何理解Python中包的引入
2020/05/29 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
给酒店员工的表扬信
2014/01/11 职场文书
迎新晚会主持词
2014/03/24 职场文书
网络技术专业求职信
2014/07/13 职场文书
世界遗产导游词
2015/02/13 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers