1. 首页
  2. 问答
  3. 在外部js加载之前执行Js语句

在外部js加载之前执行Js语句

2014-09-26 72 views
0

我正在使用esapi进行输出编码。但是，它的工作很奇怪。在外部js加载之前执行Js语句

代码

<html> 
    <head> 
    <title> AC </title> 
    </head> 
    <body> 
     <style type="text/css"> 
     .ac-container { 
      font-family: Verdana,Arial,Helvetica,sans-serif; 
      font-size: 12px; 
      table-layout: fixed; 
      border-collapse: collapse; 
      width: 100%; 
      border: 6px solid #BFCAFF; 
      background-color: #F5F8FD; 
     } 
     .ac-close { color: #FF0000;float: right; cursor: pointer; } 
     .ac-header { color: #0771D4; background-color: #E4EFFA; padding: 5px; font-weight: bold; border-bottom: 1px solid #B0D2F1; } 
     .ac-search { padding: 3px 3px 0; } 
     .ac-search table { background-color: #fff; border: 1px solid #BDCED5; width: 100%; } 
     .ac-search-td1 { width: 18px; } 
     .ac-search-td2 input { width: 100%; border: none; } 
     .ac-searchico { 
      float: left; height:18px; width:18px; 
     } 
     .ac-categories { padding: 3px 3px; float: right; width: 70%; } 
     .ac-categories select { 
      width: 100%; 
      color: #000; 
      border: 1px solid #BDCED5; 
      font-size: 11px; 
      padding: 2px 0; 
      font-family: Verdana,Arial,Helvetica,sans-serif; 
      font-weight: bold; 
     } 
     .ac-categories option { font-weight: normal; } 
     .ac-cts-nm { font-weight: bold; float: left; } 
     .ac-cts-mail { color: #777; } 
     .ac-cts-row, .ac-cts-row-sel { padding: 5px 0; cursor: pointer; float: left; width: 100%; overflow: hidden; border-bottom: 1px solid #E3E4DF; white-space: nowrap; } 
     .ac-cts-row-sel { background-color: #FEFAD1; border-bottom: 1px solid #EBE5C3; } 
     .ac-cts-nm, .ac-cts-mail { 
      float: left; padding: 0; margin: 0; margin-left: 3px; 
      color: #737373; 
     } 
     .ac-cts-mail { clear: both; font-size: 11px; margin-left: 21px; color: #9E9E9E; } 
     .ac-cts-row em, .ac-cts-row-sel em, .ac-selectall em, .ac-selectall-check em { 
      clear: both; font-size: 11px; margin-left: 21px; color: #9E9E9E; 
      float:left; display: block; width: 16px; height: 16px; cursor: pointer; 
      margin-left: 2px; 
     } 
     .ac-cts-row-sel em, .ac-selectall-check em { background-position: -22px -139px; } 
     .ac-button { padding: 5px; margin: 0 auto; text-align: center; } 
     .ac-firstico, .ac-Dfirstico, .ac-lastico, .ac-Dlastico, .ac-previco, .ac-Dprevico, .ac-nextico, .ac-Dnextico { 
      width: 20px; height: 16px; cursor: pointer; margin-right: 3px; 
     } 
     .ac-Dfirstico { background-position: -4px -90px; } 
     .ac-previco { background-position: -70px -114px; } 
     .ac-Dprevico { background-position: -28px -90px; } 
     .ac-nextico { background-position: -43px -90px; } 
     .ac-Dnextico { background-position: -1px -114px; } 
     .ac-lastico { background-position: -67px -90px; } 
     .ac-Dlastico { background-position: -25px -114px; } 
     .ac-navigation { 
      background-color: #F5F8FD; 
      border: 1px solid #CEE1F0; border-left: none; border-right: none; 
      color:#9E9E9E; font-size:11px;font-weight:bold; 
      padding:2px; 
      text-align:center; 
     } 
     .ac-nav-page { 
      display:inline; 
      margin:0 5px; 
      vertical-align:super; 
     } 
     .ac-navigation select { font-size:10px; border: 1px solid #BDCED5; } 
     .ac-selectall, .ac-selectall-check { width: 25%; overflow: hidden; color: #000; font-weight: normal; font-size: 11px; padding: 1px 0 4px; float: left;margin-top:3px;padding:3px 0; } 
     .ac-selectall div, .ac-selectall-check div { margin-top: 1px; white-space: nowrap;cursor: default; } 
     .ac-nocts { 
      padding: 5px;color: #aaa;text-align: center;font-weight: bold; 
     } 
     .ac-loading { 
      background-color:#0568B2; 
      color:#FFFFFF; 
      font-weight:bold; 
      height:15px; 
      left:40%; 
      padding:4px 10px; 
      position:absolute; 
      top:35%; 
      z-index:2001; 
      display: none; 
     } 
     .ac-button input, .ac-button input:hover { 
      background-color:#74A1EC; 
      border:1px outset #5983EE; 
      color:#FFFFFF; 
      font-weight:bold; 
      cursor: pointer; 
     } 
    </style> 
    <table class="ac-container" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td class="ac-header"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div class="ac-loading" id="ac-loading"> 
       </div> 
       <div class="ac-search"> 
        <table cellspacing="0" cellpadding="0"> 
         <tr> 
          <td class="ac-search-td1"> 
           <span class="ac-searchico"></span> 
          </td> 
          <td class="ac-search-td2"> 
          </td> 
         </tr> 
        </table> 
       </div> 
       </div> 
       <div class="ac-selectall" id="ac-selectall"> 
        <em class="ac-uncheck" onclick="AC.selectAll(this.parentNode);"></em> 
       </div> 
       <div class="ac-cts-container" id="ac-cts-container"> 
       </div> 
       </td> 
      </tr> 
    </table> 
    <script> 
    //Adding dummy var to ignore esapi dependency error. 
    var ESAPI_Standard_en_US = { 
    }; 
    <script src="/esapi/esapi-compressed.js" type="text/javascript"></script> 
    <script src="/esapi/Base.esapi.properties.js" type="text/javascript"></script> 
    <script> 
     // Initialize the api 
     org.owasp.esapi.ESAPI.initialize(); 
    </script> 
</body> 
</html>

本声明 “org.owasp.esapi.ESAPI.initialize（）” 外部JS调用之前被加载。所以，我得到的“org”是未定义的。

我检查了Chrome和Firefox，在两个浏览器中都遇到同样的问题。这是正常的行为吗？我希望，外部js正在同步加载。

此页面嵌入在使用iframe的其他页面中。

我该如何解决这个问题？

来源

2014-09-26 kannanrbk

回答

2

Javascript
您必须等到调用该函数，直到DOM被加载。 在纯JS，你可以是这样做的：关于js版

if (window.addEventListener) // W3C standard 
{ 
    window.addEventListener('load', fn, false); 
} 
else if (window.attachEvent) // Microsoft 
{ 
    window.attachEvent('onload', fn); 
} 

function fn(){ 
    org.owasp.esapi.ESAPI.initialize(); 
}

的更多信息：pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

jQuery的
但它更容易使用jquery，因为它具有回退的buildin。 jQuery中：有关jQuery的版本

$(document).ready(function(){ 
    org.owasp.esapi.ESAPI.initialize(); 
});

的更多信息：pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

来源

2014-09-26 12:26:00

+0

此页面包含在iframe中。 'window.onload或window.addEventListener'不工作。 – kannanrbk 2014-09-26 13:20:30

+0

所以对象是在iframe？比使用'document.getElementById（“yourFrame”）。contentWindow.org.owasp.esapi.ESAPI.initialize（）;'（参见http://stackoverflow.com/questions/251420/invoking-javascript-code-in-an - 从父母的页面） – 2014-09-26 13:28:44

+0

对不起，我想我迷茫你。 例如： MyPage - > a.html嵌入在某个x页面中。