使用Dojo Toolkit TabContainer时JSP内嵌脚本无法执行问题求助

我之前开发Dojo应用时也踩过这个一模一样的坑！你遇到的问题核心在于Dojo的ContentPane默认不会执行加载内容中的脚本，再加上脚本作用域的限制，才导致点击按钮时提示函数未定义。下面一步步给你解决：

原因分析 #

Dojo的ContentPane组件为了安全和避免全局作用域污染，默认会忽略加载的HTML内容里的<script>标签——即便标签里的代码存在也不会执行。另外，就算脚本侥幸被执行了，默认情况下函数也不在全局作用域里，所以你的onclick="helloWorld()"根本找不到这个函数。

解决方案 #

1. 开启ContentPane的脚本执行权限 #

首先要给ContentPane添加executeScripts: true配置，明确告诉Dojo要执行加载内容里的脚本：

修改你的home.js中创建ContentPane的代码：

tab = new ContentPane({
  id: tabId,
  title: sidebarMenuText,
  href: url,
  closable: true,
  executeScripts: true // 新增这一行，启用脚本执行
});

2. 解决脚本作用域问题 #

开启executeScripts后，脚本会被执行，但默认是在ContentPane的内部作用域，不是全局的window对象，所以你的inlineonclick还是找不到helloWorld函数。这里有两种靠谱的解决方式：

方式一：把函数挂载到全局window对象（快速解决）

修改page.jsp里的脚本，把函数绑定到window上，让全局作用域能访问到：

<script>
// 将函数挂载到全局window，这样inline onclick就能找到它
window.helloWorld = function() {
  alert('helloWorld?');
}
</script>

方式二：用Dojo的事件绑定代替inline onclick（更推荐）

这更符合Dojo的开发规范，也能避免污染全局作用域。修改page.jsp的内容：

<section class="wrapper">
  <!-- page start -->
  <div class="row">
    <div class="col-sm-12">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h2 class="page-header">page 3</h2>
        </div>
        <div class="panel-body">
          <!-- 去掉inline onclick属性 -->
          <button id="btn" type="button">Click</button>
        </div>
      </div>
    </div>
  </div>
  <!-- page end-->
</section>
<script>
// 用Dojo的事件绑定处理点击逻辑
require(['dojo/on', 'dojo/dom'], function(on, dom) {
  on(dom.byId('btn'), 'click', function() {
    alert('helloWorld?');
  });
});
</script>

注意事项 #

• 开启executeScripts时要确保你加载的URL是完全可信的，如果加载第三方不可控的内容，可能存在XSS安全风险。
• 如果你的JSP里有依赖Dojo的复杂脚本，最好确保Dojo已经加载完成再执行，避免出现require未定义的错误。

内容的提问来源于stack exchange，提问作者aruighrha