【日常记录-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>
相关推荐
xw511 小时前
uni-app项目支付宝端Input不受控
前端·uni-app·支付宝
大翻哥哥11 小时前
Python上下文管理器进阶指南:不仅仅是with语句
前端·javascript·python
IT_陈寒11 小时前
React 性能优化必杀技:这5个Hook组合让你的应用提速50%!
前端·人工智能·后端
再吃一根胡萝卜11 小时前
Git 强制推送指南:新手必读的「危险操作」解析
前端
诚实可靠王大锤12 小时前
react-native项目通过华为OBS预签名url实现前端直传
前端·react native·华为
Monly2112 小时前
Vue:下拉框多选影响行高
前端·javascript·vue.js
是罐装可乐12 小时前
前端架构知识体系:Source Map 的用法和全面解析
前端·映射·前端架构·代码安全·源码地图·source-map
小桥风满袖12 小时前
极简三分钟ES6 - ES8中对象扩展
前端·javascript
代码的余温12 小时前
Web服务器VS应用服务器:核心差异解析
运维·服务器·前端
一涯12 小时前
日常小常识记录
前端