个人中心
gpt4 book ai didi

javascript - 外部js加载之前执行的js语句

转载 作者：行者123 更新时间：2023-11-28 19:34:54 25 4
gpt4 key购买 nike

我使用 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>

这条语句“org.owasp.esapi.ESAPI.initialize()”在外部js加载之前被调用。所以，我得到“org”未定义。

我检查了 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版本的更多信息:pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

Jquery
但使用 jquery 更容易，因为它有后备内置功能。在 jquery 中:

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

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

关于javascript - 外部js加载之前执行的js语句，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26059364/

25 4 0
文章推荐： Django:Rest Framework 验证 header
文章推荐： javascript - 是否应该在express.js 的所有路由中使用app.use 配置模块？
文章推荐： javascript - Jquery $.get 在主题标签后剪切 url
文章推荐： python - 如何在 1 行代码中不使用 for 循环来创建字典？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com