dojo contentPane,我在我的ContentPane中用href发布html代码。 HTML代码有脚本但不起作用,为什么?

时间:2014-03-18 16:06:08

标签: javascript jquery html dojo

我在我的应用程序中使用了dojo 1.9。我在我的ContentPane中用href发布html代码。 html代码有一个脚本但不起作用。

index.html代码:

<html>
<head>
  <meta charset="utf-8">   
  <link rel="stylesheet" href="css/claro.css">  
  <script>  dojoConfig = {parseOnLoad: true}    </script>   
  <script>
     require(
    ["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionPane","dijit/form/Button"]
      );
  </script>
</head>
<body class="claro">
  <script src="dojo/dojo.js"></script>
  <div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%;height: 100%;position: absolute;z-index:1" id="main">
  <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" >
    <img src="ds.png" alt="ds" style="float: left; margin-right: 50px;"> 
    <img src="user.png" alt="ds" style="float: right;  height: 90px;">
    <div style="float: right;margin-right: 10px;">      
        <div id="loginName">    </div>
        <div id="email"></div>      
    </div>      
  </div>
<div data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props="region:'leading'">
    <div data-dojo-type="dijit/layout/AccordionPane" title="pane #1"> panel #1</div>
    <div data-dojo-type="dijit/layout/AccordionPane" title="pane #2"> panel #2</div>
    <div data-dojo-type="dijit/layout/AccordionPane" title="pane #3"> panel #3</div>
</div>
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center'">
    <div data-dojo-type="dijit/layout/ContentPane" title="tab #1" >panel #1</div>
    <div data-dojo-type="dijit/layout/ContentPane" title="tab #2" href="app/view/second.html"></div>
    <div data-dojo-type="dijit/layout/ContentPane" title="tab #3" href="app/view/third.html"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">Footer</div>
</div>
</body>
</html>

app / view / third.html代码:

<button  type="button"  id="bpru">Click me!</button>

<div id="pp"></div>
<script>    
      on(dom.byId("bpru"), "click", function(){
           domConst.place("<bold>hello!!!</bold>", "pp");
      });

</script>

为什么不使用脚本代码?

1 个答案:

答案 0 :(得分:2)

那是因为它选择不按此方式工作。使用JavaScript,您可以轻松检索外部内容,但在您加载外部内容时,脚本会 解释。

如果您想这样做,您必须使用内容上的eval()功能来评估页面上的脚本。但是,这通常被认为是一种不好的做法,因为如果它没有得到正确实施,可能会给您的网站带来一些注入漏洞。在this answer中了解更多相关信息,它涵盖了被视为不良做法的所有原因。

如果您仍想在远程页面上执行脚本,请使用dojox/layout/ContentPane模块。此模块与dijit/layout/ContentPane非常相似,但它有一个名为executeScripts的属性,允许您执行远程脚本。

因此,您的HTML代码( index.html )可能包含以下内容:

<div data-dojo-type="dojox/layout/ContentPane" title="tab #3" data-dojo-props="href: 'app/view/third.html', executeScripts: true"></div>

*小记:我还将您的href转换为data-dojo-props替代方案。您不必这样做,但据我所知,href不是<div>元素的正确属性,因此此HTML更有效。