dojo contentPane, I post html code with href in my ContentPane. The html code has a script but does not work, why?

Question

I use dojo 1.9 in my aplication. I post html code with href in my ContentPane. The html code has a script but does not work.

index.html code:

<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>

And app/view/third.html code:

<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>

Why don't work the script code?

score 2 · Accepted Answer · edited May 23 '17 at 12:12

That's because it's chosen to not work that way. With JavaScript you can easily retrieve external content, but scripts are not interpreted when you're loading external content.

If you want to do that you have to use the eval() function on your content to evaluate the scripts that are on the page. However, this is usually considered a bad practice because if it isn't properly implemented, it may introduce several injection vulnerabilities to your website. Read more about it in this answer, it covers all reasons why it is considered a bad practice.

If you still want to execute scripts on the remote pages, then use the dojox/layout/ContentPane module. This module is very similar to dijit/layout/ContentPane but it has a property called executeScripts that allows you to execute remote scripts.

So your HTML code (index.html) may contain something like:

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

* Small note: I also converted your href to a data-dojo-props alternative. You don't have to do that but as far as I know the href is not a proper attribute for a <div> element, so this HTML is more valid.

This answer is correct, but I would like to caution that it is almost always a bad idea from a maintenance perspective to use `dojox/layout/ContentPane`. I would much more highly recommend properly structuring an application as templated widgets all the way down, so that you can properly encapsulate (and organize) JavaScript code within modules. — Ken Franqueiro, Mar 19 '14 at 04:30
Indeed, I also discourage using it because `eval()` is evil, even when it's wrapped inside a widget like `dojo/layout/ContentPane`. Usually when you need something like this your code is not well designed and might need to be reconsidered. — g00glen00b, Mar 19 '14 at 07:48

dojo contentPane, I post html code with href in my ContentPane. The html code has a script but does not work, why?

1 Answers1