vue 浙里办前端改造，引入jquery脚本文件并使用

本文链接：https://blog.csdn.net/anwenagululu/article/details/135015034

实现嵌入浙里办头部底部样式，以及浙里办登录

在 Vue.js 项目中引入外部 JavaScript 脚本文件可以通过以下几个步骤完成：

1. 在你的 Vue.js 项目中的 public/index.html 文件中，找到 <head> 标签，并在其中添加如下代码，引入 jQuery 脚本文件：

<script src="https://zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web1/site/script/zjzw2023/jquery.min.js"></script>

2. <div id="zjzwCommonheader"> <script src="https://zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web1/site/script/zjzw2023/commonHeader.js" /> </div> 示例这段代码在vue中使用

我们在组件的mounted钩子函数里创建了一个<script>元素，设置其src为你提供的URL，并将其添加到具有id="zjzwCommonheader"的DOM元素中。这样，在组件挂载后，该脚本将被加载并执行。

<template>
  <div class="headers">
    <div id="zjzwCommonheader"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = "https://zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web1/site/script/zjzw2023/commonHeader.js";
    script.async = true;
    document.getElementById('zjzwCommonheader').appendChild(script);
  }
};
</script>

<style scoped>
/* Your component styles */
</style>

3. 想要改变外部commonHeader.js中的值

const script = document.createElement("script");
script.src =
"https://zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web1/site/script/zjzw2023/commonHeader.js";
script.async = true;
window.zjzwIsLogin = false; //改变commonHeader.js中的zjzwIsLogin变量
window.zjzwIsNav = false;
window.zjzwIsSearch = false;
window.zjzwIsFixBox = false;

document.getElementById("zjzwCommonheader").appendChild(script);

4. 想要引用外部js的方法getCookieMode

// 创建一个 <script> 元素
const scriptElement = document.createElement("script");

// 设置脚本的 src 属性
scriptElement.src = "https://zjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/jcms_files/jcms1/web1/site/script/1308/2109061849141316.js";

// 设置脚本为异步加载
scriptElement.async = true;

// 定义加载完成后的回调函数
scriptElement.onload = function () {
  // 脚本加载完成后，调用其中的 getCookieMode 方法
  getCookieMode();
};

// 将脚本元素添加到文档尾部
document.getElementById("zjzwCommonfooter").appendChild(scriptElement);

5. 登陆

跳转浙里办登录，需要配置回调地址，回调地址带有ticketId，传入后端接口

getTicket() {
      var url = window.location.href; // 获取页面路由
      if (url.indexOf("ticketId") != -1) {
        this.ticket = url.split("=")[2].split("#")[0];
      }
      console.log("登陆后的url", url, this.ticket);
      //如果有票据的并且没有登录过，那么进行获取个人信息操作
      if (this.ticket != "" && !localStorage.getItem("companyName")) {
        this.getZLBuserInfo();
      }
    },