【日常记录-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>
相关推荐
qb7 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖7 小时前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯7 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰7 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f7 小时前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖7 小时前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰7 小时前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
NewChapter °7 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
练习时长两年半的Java练习生(升级中)7 小时前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
vipbic7 小时前
关于Vue打包的遇到模板引擎解析的引号问题
前端·webpack