javascript - js代码写在HTML正常，分离成js文件再在HTML中引用不起作用

查看：153
本文介绍了javascript - js代码写在HTML正常，分离成js文件再在HTML中引用不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

问 题

js代码写在HTML功能正常，分离成js文件再在HTML中引用却不起作用

js代码片段，功能是调用高德地图JS API，并做些布局调整

var map = new AMap.Map("container", {
    resizeEnable: true,
    zoomEnable: true,
    center: [116.397428, 39.90923],
    zoom: 11
});

js写在html页面正常的全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>毕业生租房</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/jquery.range.css" />
    <script src="http://cache.amap.com/lbs/static/jquery-1.9.1.js"></script>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.3&key=e9b08cbf29e4dc01af20a4f6a0299a62&plugin=AMap.ArrivalRange,AMap.Scale,AMap.Geocoder,AMap.Transfer,AMap.Autocomplete"></script>
    <script src="http://cache.amap.com/lbs/static/jquery.range.js"></script>
    <style>
    .control-panel {
        position: absolute;
        top: 30px;
        right: 20px;
    }

    .control-entry {
        width: 280px;
        background-color: rgba(119, 136, 153, 0.8);
        font-family: fantasy, sans-serif;
        text-align: left;
        color: white;
        overflow: auto;
        padding: 10px;
        margin-bottom: 10px;
    }

    .control-input {
        margin-left: 120px;
    }

    .control-input input[type="text"] {
        width: 160px;
    }

    .control-panel label {
        float: left;
        width: 120px;
    }

    #transfer-panel {
        position: absolute;
        background-color: white;
        max-height: 80%;
        overflow-y: auto;
        top: 30px;
        left: 20px;
        width: 250px;
    }
    </style>
</head>

<body>
    <div id="container"></div>
    <div class="control-panel">
        <div class="control-entry">
            <label>选择工作地点：</label>
            <div class="control-input">
                <input id="work-location" type="text">
            </div>
        </div>
        <div class="control-entry">
            <label>选择通勤方式：</label>
            <div class="control-input">
                <input type="radio" name="vehicle" value="SUBWAY,BUS" onClick="takeBus(this)" checked/> 公交+地铁
                <input type="radio" name="vehicle" value="SUBWAY" onClick="takeSubway(this)" /> 地铁
            </div>
        </div>
        <div class="control-entry">
            <label>导入房源文件：</label>
            <div class="control-input">
                <input type="file" name="file" onChange="importRentInfo(this)" />
            </div>
        </div>
    </div>
    <div id="transfer-panel"></div>
    
    ***这是js代码片段***
    <script>
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoomEnable: true,
        center: [116.397428, 39.90923],
        zoom: 11
    });
    </script>
    
</body>
</html>

js分离成文件被HTML引用的出现问题的全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA_Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>毕业生租房</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/jquery.range.css" />
    <link rel="stylesheet" href="index.css" />
    <script src="http://cache.amap.com/lbs/static/jquery-1.9.1.js"></script>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.3&key=e9b08cbf29e4dc01af20a4f6a0299a62&plugin=AMap.ArrivalRange,AMap.Scale,AMap.Geocoder,AMap.Transfer,AMap.Autocomplete"></script>
    <script src="http://cache.amap.com/lbs/static/jquery.range.js"></script>
    
    ***引用js文件代码***
    <script src="rent_room/index.js"></script>

</head>
<body>
    <div id="container"></div>
    <div class="control-panel">
        <div class="control-entry">
            <label>选择工作地点：</label>
            <div class="control-input">
                <input id="work-location" type="text">
            </div>
        </div>
        <div class="control-entry">
            <label>选择通勤方式：</label>
            <div class="control-input">
                <input type="radio" name="vehicle" value="SUBWAY,BUS" onClick="takeBus(this)" checked/> 公交+地铁
                <input type="radio" name="vehicle" value="SUBWAY" onClick="takeSubway(this)" /> 地铁
            </div>
        </div>
        <div class="control-entry">
            <label>导入房源文件：</label>
            <div class="control-input">
                <input type="file" name="file" onChange="importRentInfo(this)" />
            </div>
        </div>
    </div>
    <div id="transfer-panel"></div>
</body>
</html>

高德API没有调用成功

解决方案

最近好多这种问题啊
之所以空白，是因为浏览器读完了你的js代码，但<script>标签下面的body都没读到。里面的dom结构也没有构建起来，不管是jq还是高德地图的参数还是简简单单的document.getElementById('container')都不会找到任何结果
你可以试试：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>毕业生租房</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/jquery.range.css" />
    <script src="http://cache.amap.com/lbs/static/jquery-1.9.1.js"></script>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.3&key=e9b08cbf29e4dc01af20a4f6a0299a62&plugin=AMap.ArrivalRange,AMap.Scale,AMap.Geocoder,AMap.Transfer,AMap.Autocomplete"></script>
    <script src="http://cache.amap.com/lbs/static/jquery.range.js"></script>
    <style>
    .control-panel {
        position: absolute;
        top: 30px;
        right: 20px;
    }

    .control-entry {
        width: 280px;
        background-color: rgba(119, 136, 153, 0.8);
        font-family: fantasy, sans-serif;
        text-align: left;
        color: white;
        overflow: auto;
        padding: 10px;
        margin-bottom: 10px;
    }

    .control-input {
        margin-left: 120px;
    }

    .control-input input[type="text"] {
        width: 160px;
    }

    .control-panel label {
        float: left;
        width: 120px;
    }

    #transfer-panel {
        position: absolute;
        background-color: white;
        max-height: 80%;
        overflow-y: auto;
        top: 30px;
        left: 20px;
        width: 250px;
    }
    </style>
    <!--把js放在这里，肯定找不到任何id为container的任何元素-->
    <script>
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoomEnable: true,
        center: [116.397428, 39.90923],
        zoom: 11
    });
    </script>
</head>

<body>
    <div id="container"></div>
    <div class="control-panel">
        <div class="control-entry">
            <label>选择工作地点：</label>
            <div class="control-input">
                <input id="work-location" type="text">
            </div>
        </div>
        <div class="control-entry">
            <label>选择通勤方式：</label>
            <div class="control-input">
                <input type="radio" name="vehicle" value="SUBWAY,BUS" onClick="takeBus(this)" checked/> 公交+地铁
                <input type="radio" name="vehicle" value="SUBWAY" onClick="takeSubway(this)" /> 地铁
            </div>
        </div>
        <div class="control-entry">
            <label>导入房源文件：</label>
            <div class="control-input">
                <input type="file" name="file" onChange="importRentInfo(this)" />
            </div>
        </div>
    </div>
    <div id="transfer-panel"></div>
    
    
    
</body>
</html>

最开始你把js放在底部，浏览器读已经读了js代码上面的那些标签，也构建起了dom树，能够让js去寻找。所以高德地图的调用没问题。

  • 解决办法：

    • 如上面几位所说的：把所有js统统放底部，这样不仅不怕dom树尚未构建导致的查找元素失败，也可以先让浏览器将css和html结合后的样式先渲染出来，避免某个js文件过大，加载时间长，导致页面长时间空白引起的不好的用户体验。

    • 其次就是给你主要执行的代码放在window.onload或者$(function(){})里面，这样是等待页面全部元素或者dom结构出来之后再执行你的代码。因为浏览器已经将html渲染进页面了，所以在执行js代码的时候，不怕找不到元素。

这篇关于javascript - js代码写在HTML正常，分离成js文件再在HTML中引用不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆