【日常记录-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>
相关推荐
鸠摩智首席音效师35 分钟前
如何清除 Yarn 缓存 ?
javascript
写不来代码的草莓熊44 分钟前
vue前端面试题——记录一次面试当中遇到的题(5)
前端
weixin_ab1 小时前
【HTML分离术】
前端·html
文心快码BaiduComate1 小时前
新手该如何选择AI编程工具?文心快码Comate全方位体验
前端·后端·程序员
夫唯不争,故无尤也1 小时前
Tomcat 内嵌启动时找不到 Web 应用的路径
java·前端·tomcat
lichong9511 小时前
【Xcode】Macos p12 证书过期时间查看
前端·ide·macos·证书·xcode·大前端·大前端++
oh,huoyuyan1 小时前
如何在火语言中指定启动 Chrome 特定用户配置文件
前端·javascript·chrome
前端大聪明20021 小时前
single-spa原理解析
前端·javascript
一枚前端小能手1 小时前
📦 从npm到yarn到pnpm的演进之路 - 包管理器实现原理深度解析
前端·javascript·npm
影i2 小时前
CSS Transform 和父元素撑开问题
前端