我的页面足够高,可以垂直滚动。完成加载后,浏览器会自动滚动到cfgrid元素所在页面的底部。它发生在IE,Chrome和Firefox中。
我已将原因缩小到ColdFusion 11服务器添加到页面顶部的JavaScript。如果我在浏览器中禁用脚本,页面不会自动滚动到底部。
将window.scrollTo(0,0)添加到body onload不起作用。无论JS在底部事件之后滚动到底部是什么。我还没有尝试过jQuery的.ready();希望有一个解决办法。
有没有其他人看过这个并知道修复或解决方法?
由于
这是我的代码
<cfoutput>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Test</title>
</head>
<body>
0<br>
1<br>
2<br>
2<br>
3<br>
3<br>
4<br>
5<br>
5<br>
6<br>
7<br>
8<br>
9<br>
<!-- Lines deleted that push the cfgrid below the bottom of the screen -->
<cfquery datasource="#application.datasource#" name="testquery">
select MNU_MENU_ID, MNU_MENU from #application.db_owner#.menu
</cfquery>
<cfform name="assays">
<cfgrid name = "FirstGrid" title="test" format="html" height="310" width="500"
stripeRows="true" preservepageonsort="true"
query = "testquery">
<cfgridcolumn name="MNU_MENU_ID" header="ID" width="25" />
<cfgridcolumn name="MNU_MENU" header="Menu" width="200" />
<!--- Hidden Columns --->
</cfgrid>
</cfform>
<script>
setTimeout(function(){ window.scrollTo(0,0); }, 4000);
//alert('scroll attempted');
</script>
</body>
</html>
</cfoutput>
以下是浏览器看到的代码:
<!DOCTYPE html>
<html>
<head><script type="text/javascript">/* <![CDATA[ */_cf_loadingtexthtml="<img alt=' ' src='/CFIDE/scripts/ajax/resources/cf/images/loading.gif'/>";
_cf_contextpath="";
_cf_ajaxscriptsrc="/CFIDE/scripts/ajax";
_cf_jsonprefix='//';
_cf_websocket_port=8577;
_cf_flash_policy_port=1243;
/* ]]> */</script><script type="text/javascript" src="/CFIDE/scripts/ajax/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/yui/animation/animation-min.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/ext-all.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/source/widgets/DataView.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/source/widgets/SplitButton.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/messages/cfmessage.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/package/cfajax.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/package/cfgrid.js"></script>
<link rel="stylesheet" type="text/css" href="/CFIDE/scripts/ajax/resources/ext/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/CFIDE/scripts/ajax/resources/cf/cf.css" />
<script type="text/javascript" src="/CFIDE/scripts/cfform.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/masks.js"></script>
<meta charset="ISO-8859-1">
<title>Test</title>
<script type="text/javascript">/* <![CDATA[ */
ColdFusion.Ajax.importTag('CFGRID');
/* ]]> */</script>
<script type="text/javascript">/* <![CDATA[ */
ColdFusion.objectCache['FirstGrid'] = new ColdFusion.Grid.Actions('cfgrid148239339981943');
_cf_GRIDTAG_initAjaxGrid_148239339981944=function()
{
var _cf_gridColModel = [{header:'ID','colName':'MNU_MENU_ID',id:'FirstGrid_MNU_MENU_ID','name':'MNU_MENU_ID',dataIndex:'MNU_MENU_ID',menuDisabled:false,sortType:'asFloat',sortable:true,flex:1,width:25},{header:'Menu','colName':'MNU_MENU',id:'FirstGrid_MNU_MENU','name':'MNU_MENU',dataIndex:'MNU_MENU',menuDisabled:false,sortType:'asUCString',sortable:true,width:200},{header:'CFGRIDROWINDEX','colName':'CFGRIDROWINDEX',id:'FirstGrid_CFGRIDROWINDEX','name':'CFGRIDROWINDEX',dataIndex:'CFGRIDROWINDEX',menuDisabled:false,sortType:'asFloat',sortable:true,hidden:true}];
var _cf_gridData = [[1,'Home',1],[2,'Compounds',2],[3,'Dashboard',3],[4,'Authorize',4],[5,'Reports',5],[6,'Administration',6],[7,'Help',7],[8,'Dataload',8],[9,'Logout',9],[17,'cmpIdentification',10],[18,'cmpAcquisition',11],[19,'cmpRegistration',12],[20,'cmpReview',13],[21,'cmpChemistry',14],[23,'stdInVitro',15],[10,'adminAssays',16],[11,'adminStudies',17],[12,'adminSubmitters',18],[13,'adminLabs',19],[14,'adminAnnouncements',20],[15,'adminUsers',21],[24,'dashProgramActivity',22],[25,'dashDashboard',23],[26,'dashStructure',24],[27,'dashResupply',25],[28,'dashInventory',26],[29,'dashTDPComments',27]];
Ext.define('cf_gridmodel', { extend: 'Ext.data.Model', fields: _cf_gridColModel,idProperty : 'CFGRIDROWINDEX' });
var _cf_gridDataModel = Ext.create('Ext.data.Store', { model : 'cf_gridmodel', data: _cf_gridData,proxy: { type: 'memory',reader : new Ext.data.reader.Array({id:_cf_gridColModel.length-1}, _cf_gridColModel)}});
ColdFusion.Grid.init('FirstGrid','__CFGRID__assays__FirstGrid','assays',false,false,true,false,'MNU_MENU_ID',_cf_gridColModel,_cf_gridDataModel,500,310,true,'#cfgrid148239339981943 .x-grid-cell-FirstGrid_MNU_MENU_ID{color:#0B333C;} #cfgrid148239339981943 .x-grid-hd-FirstGrid_MNU_MENU_ID{color:#0B333C;} #cfgrid148239339981943 .x-grid-row-selected .x-grid-cell-FirstGrid_MNU_MENU_ID{background-color:#7FCDFE !important;} #cfgrid148239339981943 .x-grid-cell-FirstGrid_MNU_MENU{color:#0B333C;} #cfgrid148239339981943 .x-grid-hd-FirstGrid_MNU_MENU{color:#0B333C;} #cfgrid148239339981943 .x-grid-row-selected .x-grid-cell-FirstGrid_MNU_MENU{background-color:#7FCDFE !important;} #cfgrid148239339981943 .x-grid-cell-FirstGrid_CFGRIDROWINDEX{color:#0B333C;} #cfgrid148239339981943 .x-grid-hd-FirstGrid_CFGRIDROWINDEX{color:#0B333C;} #cfgrid148239339981943 .x-grid-row-selected .x-grid-cell-FirstGrid_CFGRIDROWINDEX{background-color:#7FCDFE !important;} #cfgrid148239339981943 .x-grid-row .x-grid-cell-FirstGrid_MNU_MENU_ID{background-color:null} #cfgrid148239339981943 .x-grid-row-alt .x-grid-cell-FirstGrid_MNU_MENU_ID{background-color:null} #cfgrid148239339981943 .x-grid-row .x-grid-cell-FirstGrid_MNU_MENU{background-color:null} #cfgrid148239339981943 .x-grid-row-alt .x-grid-cell-FirstGrid_MNU_MENU{background-color:null} #cfgrid148239339981943 .x-grid-row .x-grid-cell-FirstGrid_CFGRIDROWINDEX{background-color:null} #cfgrid148239339981943 .x-grid-row-alt .x-grid-cell-FirstGrid_CFGRIDROWINDEX{background-color:null} ',10,true,true,null,false,null,'test',null,null,{'appendKey':true,colInfo:[null,null,null]},null,null,null,null);
Ext.form.ComboBox.prototype.triggerAction = 'all';
};ColdFusion.Event.registerOnLoad(_cf_GRIDTAG_initAjaxGrid_148239339981944);
/* ]]> */</script>
<script type="text/javascript">
<!--
_CF_checkassays = function(_CF_this)
{
//reset on submit
_CF_error_exists = false;
_CF_error_messages = new Array();
_CF_error_fields = new Object();
_CF_FirstErrorField = null;
//display error messages and return success
if( _CF_error_exists )
{
if( _CF_error_messages.length > 0 )
{
// show alert() message
_CF_onErrorAlert(_CF_error_messages);
// set focus to first form error, if the field supports js focus().
if( _CF_this[_CF_FirstErrorField].type == "text" )
{ _CF_this[_CF_FirstErrorField].focus(); }
}
return false;
}else {
return true;
}
}
//-->
</script>
</head>
<body>
0<br>
1<br>
2<br>
2<br>
3<br>
3<br>
4<br>
5<br>
5<br>
6<br>
7<br>
8<br>
9<br>
<!-- Again, lines deleted that push the cfgrid below the bottom of the screen -->
<form name="assays" id="assays" action="/index.cfm" method="post" onsubmit="return _CF_checkassays(this)">
<div id="cfgrid148239339981943" style="border: 1px solid #cccccc; overflow: hidden;height:310px;">
</div> <div><input type="hidden" name="__CFGRID__assays__FirstGrid" value="" /></div>
</form>
</body>
</html>
答案 0 :(得分:1)
将来,请提供直接代码,以便此处的用户可以正确使用您正在使用的内容。使用CF9,我无法复制行为,但就像你说的那样,你正在使用CF11。
您编写的代码,您继承的代码,或者您从某处复制的代码(如教程)?你确定它是CF生成的javascript导致破坏而不是设计用于聚焦网格的javascript吗?
如果这是你无法追踪的东西,而其他人没有更好的解决方案,这可能会有效。它目前设置为3000(3秒),但较短的时间应该更好(并且不会让用户烦恼。
我会把它放在你的cfgrid之后。
<script>
setTimeout(function(){ window.scrollTo(0,0); }, 3000);
</script>
你也可以找到这个javascript的解决方案。
var scrolled = 0;
window.onscroll = function() {
if (!(scrolled)) {
scrolled = 1;
setTimeout(function(){ window.scrollTo(0,0); }, 300);
}
};
但我只会将它放在您的cfgrid页面中,而不是放在您的网站上。惹恼别人的好方法。
答案 1 :(得分:0)
感谢您的建议,@ cfqueryparam。但我发现解决方案是将属性selectOnLoad="false"
添加到cfgrid
标记。它在CF11中的默认值是&#34; true&#34;。我不确定CF10,但在CF9中似乎默认为&#34; false&#34;。