在加载外部Js之前执行的Js语句
Js statements executed before external js loaded
我使用esapi进行输出编码。但是,它的工作方式很奇怪。
代码
<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>
在加载外部js之前,会调用以下语句"org.owasp.esapi.esapi.initialize()"。所以,我得到了"组织"是未定义的。
我检查了chrome和firefox,在两个浏览器中都出现了相同的问题。这是正常行为吗?。我希望外部js正在同步加载。
此页面已使用iframe嵌入到另一个页面中。
如何解决此问题?
Javascript
您必须等待调用该函数,直到加载DOM为止。在纯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();
}
关于js版本的更多信息:相当于jQuery';s$.ready()如何在page/dom准备就绪时调用函数
Jquery
但是使用jquery更容易,因为它有回退构建。在jquery中:
$(document).ready(function(){
org.owasp.esapi.ESAPI.initialize();
});
关于jquery版本的更多信息:相当于jquery';s$.ready()如何在page/dom准备就绪时调用函数
您应该在window.onload处理程序中执行该行。
window.onload
是在加载文档和相关资源(包括外部脚本)后由浏览器触发的全局事件。
相关文章:
- 如何从Node.js执行.exe文件
- 在外部JS执行后加载JavaScript
- JS:执行'失败;getComputedStyle'在'窗口':参数的类型不是'
- 使用 Node.js 执行命令行二进制文件
- 获取js执行环境的版本描述
- 使用director.js执行基于哈希的函数
- 打开文件时停止了JS执行
- 为什么我不能在 Angular JS 服务中更改数据.js执行函数后
- 同步 JavaScript 调用节点 js- 执行 GET in for 循环
- 使用 Node.js 执行 EXE 文件
- 从其他 JS 执行一个函数
- 从 PHP 读取变量并使用 js 执行选择查询
- 使用 IE 开发人员工具防止 JS 执行
- 如何在使用sails JS执行res.view()函数调用之前调用另一个服务(函数)
- d3.js执行中跳过d3.extent()
- Chrome扩展..从JS执行CSS
- 通过html按钮使用node.js执行本地文件
- 使用Node.js执行简单Unix终端命令
- 在不更改鼠标位置的情况下从JS执行mouseover()
- Node.js:执行多个异步操作的最佳方式,然后执行其他操作