【日常记录-JS】HTML动态加载JS脚本

Author:赵志乾
Date:2024-08-05
Declaration:All Right Reserved!!!

1. 问题描述

从外部系统跳到落地页,并将验签相关参数通过url参数传入落地页。由于后台对所有请求均增加了验签校验,导致js静态文件获取失败。原有代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面</title>
</head>
<!--由于src指定的静态文件未添加验签信息,导致请求被拦截-->
<script type="text/javascript" src="standalone.bundle.js"></script>

2. 解决方案

由于HTML本身是静态的,动态加载JS文件,需要通过脚本来实现;代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面</title>
</head>
<script>
    // 定义脚本加载函数
    function loadScript(url) {
        // step1: 创建script标签并赋值基本属性
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;
        script.onload = function() {
            console.log('Script loaded and executed.');
        };
        script.onerror = function() {
            console.error('Script loading failed.');
        };
        // step2: 将script标签添加到HTML页面
        document.head.appendChild(script);
    }

    window.onload = function() {
        // 在加载脚本时拼接验签参数
        loadScript("standalone.bundle.js"+window.location.search);
    };
</script>
相关推荐
初遇你时动了情17 分钟前
uniapp 城市选择插件
开发语言·javascript·uni-app
zhangjr05751 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
不爱学习的YY酱1 小时前
【操作系统不挂科】<CPU调度(13)>选择题(带答案与解析)
java·linux·前端·算法·操作系统
zongzi_4941 小时前
二次封装的天气时间日历选择组件
开发语言·javascript·ecmascript
木子七1 小时前
vue2-vuex
前端·vue
麻辣_水煮鱼1 小时前
vue数据变化但页面不变
前端·javascript·vue.js
BY—-组态2 小时前
web组态软件
前端·物联网·工业互联网·web组态·组态
一条晒干的咸魚2 小时前
【Web前端】实现基于 Promise 的 API:alarm API
开发语言·前端·javascript·api·promise
WilliamLuo2 小时前
MP4结构初识-第一篇
前端·javascript·音视频开发
Beekeeper&&P...2 小时前
web钩子什么意思
前端·网络