第1步 我在页面上写了一个element (一个用于前台操作js,一个后台注册):
<a href="javascript:void(0)" id="Linktest">我在测试submodal</a>
<asp:Button ID="btntest" runat="server" Text="测试后台注册脚本" OnClick="btntest_Click" />
第2步 写js:
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="Scripts/ScriptByColin/subModal/subModal.css" type="text/css" />
<script src="Scripts/ScriptByColin/subModal/common.js" type="text/javascript"></script>
<script src="Scripts/ScriptByColin/subModal/subModal.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Linktest").click(function () {
showPopWin("About.aspx", 900, 600, null, true);
});
});
///用于后台注册时调用
function set() {
showPopWin("About.aspx", 900, 600, null, true);
}
后台方法关键语句为:
this.Page.ClientScript.RegisterStartupScript(this.GetType(), "test", "set()", true);
第三步:测试前台 调用showPopWin函数 然后逐步进入subModal.js中 先执行一个初始化函数initPopUp() 然后真正执行showPopWin()函数 一切正常
第四步:测试后台注册脚本 调用showPopWin函数 进入subModal.js中 直接进入showPopWin()函数 了 而没有进入初始化函数 结果当然是报错了 希望哪位给解释下
1. 要了解 浏览器解析的顺序,浏览器 解析是从上至下 来解析js,解析js是同步的,也就是说js 可以卡住页面。
2.this.Page.ClientScript.RegisterStartupScript 这个注册的js 是注册在哪个地方,和 你引用的js文件顺序很重要,因为浏览器解析js是按顺序的。
3. 光贴后台代码还不够,你要把 你这个页面生成html代码贴出来,就一目了然了。
this.Page.ClientScript.RegisterStartupScript 这个方法是在htm生成后 加载在body后面的 理论上这个时候js已经加载完了吧 我现在贴页面源码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
</title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="Scripts/ScriptByColin/subModal/subModal.css" type="text/css" />
<script src="Scripts/ScriptByColin/subModal/common.js" type="text/javascript"></script>
<script src="Scripts/ScriptByColin/subModal/subModal.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Linktest").click(function () {
showPopWin("About.aspx", 900, 600, null, true);
});
});
function set() {
showPopWin("About.aspx", 900, 600, null, true);
}
</script>
</head>
<body>
<form method="post" action="WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="tk/13YtKkPOjqEf4PgIUM1QGSdYyh7tQS9NikJEj/WDAVshCOvCNyk3V8MCpVu0uoTbIp9mHHK0ZNrBmiw9k4WCWl3d/kBvANqyuridwpTA=" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="6jLZqpl1ExvbQJPw8NKh6dN76mEvKR2Egqc/fFHhFaevZjFJT2oPaMSIJN3WQtvYARFqtgO0b8TOhCZuWr5y6A7DCv9iXnYQuYPuVluTZ1Tmo2wSxv6elrTKfIRBVjyT" />
</div>
<div>
<a href="javascript:void(0)" onclick="set()">我在测试submodal</a>
<input type="submit" name="btntest" value="测试后台注册脚本" id="btntest" />
</div>
<script type="text/javascript">
//<![CDATA[
set()//]]>
@enpos:
看看firebug中的错误信息, 或者 直接复制你的 代码 在页面中执行试试,再看错误信息。
不知道你的initPopUp函数写在什么地方,如果你只调用了showPopWin()他只会执行showPopWin(),如果你还想调用别的,要么在test中加入要执行的函数,要么写在showPopWin()中。
这个initPopUp函数 是在我调用的Scripts/ScriptByColin/subModal/subModal.js中的 我前台执行showPopWin()的时候 它会进这个js 先执行initPopUp函数 再执行showPopWin()函数 但是后台进去的话 初始化这个函数并没有执行 而是直接执行showPopWin()
@Loui:
/** * SUBMODAL v1.6 * Used for displaying DHTML only popups instead of using buggy modal windows. * * By Subimage LLC * http://www.subimage.com * * Contributions by: * Eric Angel - tab index code * Scott - hiding/showing selects for IE users * Todd Huss - inserting modal dynamically and anchor classes * * Up to date code can be found at http://submodal.googlecode.com */
// Popup code var gPopupMask = null; var gPopupContainer = null; var gPopFrame = null; var gReturnFunc; var gPopupIsShown = false; var gDefaultPage = "Scripts/subModal/loading.html"; var gHideSelects = false; var gReturnVal = null;
var gTabIndexes = new Array(); // Pre-defined list of tags we want to disable/enable tabbing into var gTabbableTags = new Array("A","BUTTON","TEXTAREA","INPUT","IFRAME");
// If using Mozilla or Firefox, use Tab-key trap. if (!document.all) { document.onkeypress = keyDownHandler; }
/** * Initializes popup code on load. */ function initPopUp() { // Add the HTML to the body theBody = document.getElementsByTagName('BODY')[0]; popmask = document.createElement('div'); popmask.id = 'popupMask'; popcont = document.createElement('div'); popcont.id = 'popupContainer'; popcont.innerHTML = '' + '<div id="popupInner">' + '<div id="popupTitleBar">' + '<div id="popupTitle"></div>' + '<div id="popupControls" onclick="hidePopWin(false);" >' + '<img style=" width:0; left:0; display:none;" id="popCloseBox" />' + '</div>' + '</div>' + '<iframe src="'+ gDefaultPage +'" style="width:100%;height:100%;background-color:transparent;" scrolling="auto" frameborder="0" allowtransparency="true" id="popupFrame" name="popupFrame" width="100%" height="100%"></iframe>' + '</div>'; theBody.appendChild(popmask); theBody.appendChild(popcont); gPopupMask = document.getElementById("popupMask"); gPopupContainer = document.getElementById("popupContainer"); gPopFrame = document.getElementById("popupFrame"); // check to see if this is IE version 6 or lower. hide select boxes if so // maybe they'll fix this in version 7? var brsVersion = parseInt(window.navigator.appVersion.charAt(0), 10); if (brsVersion <= 6 && window.navigator.userAgent.indexOf("MSIE") > -1) { gHideSelects = true; } // Add onclick handlers to 'a' elements of class submodal or submodal-width-height var elms = document.getElementsByTagName('a'); for (i = 0; i < elms.length; i++) { if (elms[i].className.indexOf("submodal") == 0) { // var onclick = 'function (){showPopWin(\''+elms[i].href+'\','+width+', '+height+', null);return false;};'; // elms[i].onclick = eval(onclick); elms[i].onclick = function(){ // default width and height var width = 400; var height = 200; // Parse out optional width and height from className params = this.className.split('-'); if (params.length == 3) { width = parseInt(params[1]); height = parseInt(params[2]); } showPopWin(this.href,width,height,null); return false; } } } } addEvent(window, "load", initPopUp);
/** * @argument width - int in pixels * @argument height - int in pixels * @argument url - url to display * @argument returnFunc - function to call when returning true from the window. * @argument showCloseBox - show the close box - default true */ function showPopWin(url, width, height, returnFunc, showCloseBox) { //if exists document.getElementById("popupControls"); if (document.getElementById("popupControls") == null) { initPopUp(); } // show or hide the window close widget if (showCloseBox == null || showCloseBox == true) { document.getElementById("popupControls").style.display = "block"; } else { document.getElementById("popupControls").style.display = "none"; } gPopupIsShown = true; disableTabIndexes(); gPopupMask.style.display = "block"; gPopupContainer.style.display = "block"; // calculate where to place the window on screen centerPopWin(width, height); var titleBarHeight = parseInt(document.getElementById("popupTitleBar").offsetHeight, 10);
gPopupContainer.style.width = width + "px"; gPopupContainer.style.height = (height+titleBarHeight) + "px"; setMaskSize();
// need to set the width of the iframe to the title bar width because of the dropshadow // some oddness was occuring and causing the frame to poke outside the border in IE6 gPopFrame.style.width = parseInt(document.getElementById("popupTitleBar").offsetWidth, 10) + "px"; gPopFrame.style.height = (height) + "px";
// set the url var SDTail;//定义URL尾,生成随机数,防止浏览器缓存 by sinodier 2011年9月3日 15:30:29 if (url!=null) { if(url.indexOf("?")>-1 ) { SDTail = '&tail=' + Math.round(Math.random() * 10000); } else { SDTail = '?tail=' + Math.round(Math.random() * 10000); } url = url + SDTail; }
gPopFrame.src = url ;
gReturnFunc = returnFunc; // for IE if (gHideSelects == true) { hideSelectBoxes(); } window.setTimeout("setPopTitle();", 600); }
// var gi = 0; function centerPopWin(width, height) { if (gPopupIsShown == true) { if (width == null || isNaN(width)) { width = gPopupContainer.offsetWidth; } if (height == null) { height = gPopupContainer.offsetHeight; } //var theBody = document.documentElement; var theBody = document.getElementsByTagName("BODY")[0]; //theBody.style.overflow = "hidden"; var scTop = parseInt(getScrollTop(),10); var scLeft = parseInt(theBody.scrollLeft,10); setMaskSize(); //window.status = gPopupMask.style.top + " " + gPopupMask.style.left + " " + gi++; var titleBarHeight = parseInt(document.getElementById("popupTitleBar").offsetHeight, 10); var fullHeight = getViewportHeight(); var fullWidth = getViewportWidth(); gPopupContainer.style.top = (scTop + ((fullHeight - (height+titleBarHeight)) / 2)) + "px"; gPopupContainer.style.left = (scLeft + ((fullWidth - width) / 2)) + "px"; //alert(fullWidth + " " + width + " " + gPopupContainer.style.left); } } addEvent(window, "resize", centerPopWin); addEvent(window, "scroll", centerPopWin); window.onscroll = centerPopWin;
/** * Sets the size of the popup mask. * */ function setMaskSize() { var theBody = document.getElementsByTagName("BODY")[0]; var fullHeight = getViewportHeight(); var fullWidth = getViewportWidth(); // Determine what's bigger, scrollHeight or fullHeight / width if (fullHeight > theBody.scrollHeight) { popHeight = fullHeight; } else { popHeight = theBody.scrollHeight; } if (fullWidth > theBody.scrollWidth) { popWidth = fullWidth; } else { popWidth = theBody.scrollWidth; } gPopupMask.style.height = popHeight + "px"; gPopupMask.style.width = popWidth + "px"; }
/** * @argument callReturnFunc - bool - determines if we call the return function specified * @argument returnVal - anything - return value */ function hidePopWin(callReturnFunc) { gPopupIsShown = false; var theBody = document.getElementsByTagName("BODY")[0]; theBody.style.overflow = ""; restoreTabIndexes(); if (gPopupMask == null) { return; } gPopupMask.style.display = "none"; gPopupContainer.style.display = "none"; if (callReturnFunc == true && gReturnFunc != null) { // Set the return code to run in a timeout. // Was having issues using with an Ajax.Request(); gReturnVal = window.frames["popupFrame"].returnVal; window.setTimeout('gReturnFunc(gReturnVal);', 1); } gPopFrame.src = gDefaultPage; // display all select boxes if (gHideSelects == true) { displaySelectBoxes(); } }
/** * Sets the popup title based on the title of the html document it contains. * Uses a timeout to keep checking until the title is valid. */ function setPopTitle() { return; if (window.frames["popupFrame"].document.title == null) { window.setTimeout("setPopTitle();", 10); } else { document.getElementById("popupTitle").innerHTML = window.frames["popupFrame"].document.title; } }
// Tab key trap. iff popup is shown and key was [TAB], suppress it. // @argument e - event - keyboard event that caused this function to be called. function keyDownHandler(e) { if (gPopupIsShown && e.keyCode == 9) return false; }
// For IE. Go through predefined tags and disable tabbing into them. function disableTabIndexes() { if (document.all) { var i = 0; for (var j = 0; j < gTabbableTags.length; j++) { var tagElements = document.getElementsByTagName(gTabbableTags[j]); for (var k = 0 ; k < tagElements.length; k++) { gTabIndexes[i] = tagElements[k].tabIndex; tagElements[k].tabIndex="-1"; i++; } } } }
// For IE. Restore tab-indexes. function restoreTabIndexes() { if (document.all) { var i = 0; for (var j = 0; j < gTabbableTags.length; j++) { var tagElements = document.getElementsByTagName(gTabbableTags[j]); for (var k = 0 ; k < tagElements.length; k++) { tagElements[k].tabIndex = gTabIndexes[i]; tagElements[k].tabEnabled = true; i++; } } } }
/** * Hides all drop down form select boxes on the screen so they do not appear above the mask layer. * IE has a problem with wanted select form tags to always be the topmost z-index or layer * * Thanks for the code Scott! */ function hideSelectBoxes() { var x = document.getElementsByTagName("SELECT");
for (i=0;x && i < x.length; i++) { x[i].style.visibility = "hidden"; } }
/** * Makes all drop down form select boxes on the screen visible so they do not * reappear after the dialog is closed. * * IE has a problem with wanting select form tags to always be the * topmost z-index or layer. */ function displaySelectBoxes() { var x = document.getElementsByTagName("SELECT");
for (i=0;x && i < x.length; i++){ x[i].style.visibility = "visible"; } }
从原理上看不出来什么问题,建议你写个小的demo来测,试把js文件中的慢慢的减少,用排除法。@enpos:
你直接调用set()是不行的,应该加上srcript标签
this.Page.ClientScript.RegisterStartupScript(this.GetType(), "test", "<script>set();</script>", true);
经验证 不加标签是 htm生成代码为:
<script type="text/javascript">
//<![CDATA[
set()//]]>
</script>
加标签 生成代码为:
<script type="text/javascript">
//<![CDATA[
<script>set()</script>//]]>
</script>
加了甚至报错 而且我写了这么长时间一直没加这个标签 我一般在response.write时候会加这个标签
@enpos:
恩,没注意第三个参数写的True
@Rich.T: :)么事么事
@enpos:
我觉得应该是页面还没有加载完就执行了,这样看看
this.Page.ClientScript.RegisterStartupScript(this.GetType(), "test", "window.onload=function(){set();}", true);
@Rich.T: 我也觉得还是没有加载的问题 你的方法试了还是一样的 没办法了 改了下js文件 我在前台调用js中方法showPopWin时判断有没有初始化 没有初始化的时候 初始化下就好了 但是就是不知道问题所在
不知道什么原因 自己修改了下js