TabPanel中加载页面时不执行页面上的js脚本-CSDN博客

本文链接：https://blog.csdn.net/yadsun/article/details/104531965

在前面的基础上实现导航跳转功能，点击导航菜单，在TabPanel中打开一个新Tab，在新Tab页中加载对应的页面，页面是跳转了可是页面中的js脚本却没执行。
跳转页面body部分内容很简单


   //脚本部本
   <script type="text/javascript">
   Ext.onReady(function(){
   function doTest()
   {
       var el=Ext.get('test');
       var bcolor=el.getStyle('background-color');
       if(bcolor=='transparent'){
       	el.setStyle('background-color','red');
       }else{
       	el.setStyle('background-color','transparent');
       }
   } 
   Ext.get('bt').on('click',doTest);
   });
   //body部分
   <body>
   	<p>This is body of page!</p>
   	<input id='bt' type="button" style="width:70px" value="测试"> 
   	<div id="test">
   		<p>这是test层中的内容,点击测试之后背景有变化</p>
   	</div> 
   </body>

没有弹出对话框，这不成了静态的了么... ...
google之，第一种方法是叫用Ext.ux.IFrameComponent([url="http://www.extjs.com/forum/showthread.php?t=18144&amp%3bhighlight=IFrameComponent"]here[/url])，没找到Ext.ux.IFrameComponent，放弃。
再google之，发现第二种最简单且有效的方法，在TabPanel中加载页面是通过配置TabPanel的autoload属性实现的，autoload: {url:'页面路径'}，只要加一个srcipts: true选项就可以了，另外还可以指定一个callback函数，ok!只要能执行js就能做出想要的效果...


   var autoLoad = {
   						url : href,//包含url值的变量
   						scripts:true,//执行页面js代码
   						callback: this.callback
   					};

   callback: function(){
   				alert("This is callback");
   			}

效果如下
页面加载时
[img]http://dl.iteye.com/upload/picture/pic/52314/af60fa67-ee98-3088-9499-38dee900d7e7.gif[/img]
点击“测试”按钮后
[img]http://dl.iteye.com/upload/picture/pic/52322/f077d838-84e4-39fd-89ca-5f9d9c8c1788.gif[/img]

[b][size=medium][i][align=center][color=red][img]http://img.tongji.linezing.com/729225/tongji.gif[/img]希望踩的朋友也能留下宝贵批评意见，也能使我从中有所收获不断进步，不甚感激！[/color][/align][/i][/size][/b]