uni-app webview的appendJsFile方法会导致webview中的网站的顶层域策略出问题
uni-app webview的appendJsFile方法会导致webview中的网站的顶层域策略出问题
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| HBuilderX | 3.99 | 离线 |
产品分类：HTML5+
手机系统：Android
手机系统版本号：Android 12
手机厂商：华为
手机机型：Mate60 Pro
操作步骤：
使用plus.webview.create创建一个目标为https://arco.design/vue/docs/start的url并添加到窗口中，此时在窗口显示之前，执行appendJsFile，例如
let wv = plus.webview.create("https://arco.design/vue/docs/start")
wv.appendJsFile('_www/static/test.js')
//此时我们默认我们已经拿到了当前窗口的对象
currentWebview.append(wv);
wv.show()预期结果：
对应网页应当正常加载和渲染
实际结果：
控制台报错，网页无法正常执行自己的js文件并加载，将appendJsFile方法那一行注释掉后可以正常加载。
23:40:20.941 Uncaught SyntaxError: In strict mode code, functions can only be declared at top level or inside a block. at <https://lf-cdn-tos.bytescm.com/obj/static/arcodesign/vue/assets/index.8b396f9a.js:2>
感谢反馈，你提到使用 webview 加载 esm 方案的网站，不能加载 注入自定义 js，会导致逻辑报错，我尝试进行复现，有问题会进行更新。
可以提供一个不是 esm 的目标网站，和想要执行的 js 逻辑吗？这种情况是可以正常处理和渲染的吗？
补充：
因为没有提供复现工程，我先建了一个工程 html 5 plus
https://gitcode.net/dcloud/5plus-demo/-/blob/main/plus/webview_embed.html
我运行这个文件，使用 安卓模拟器运行，发现可以正常运行 js 弹窗两次 alert，没有发现你的问题。
请按照我提供的工程文件，具体指出问题如何复现，如何修改。
或者提供可以复现的工程。
不是esm的目标网站目前直接访问 google.com 即可。 至于想执行的js逻辑，目前测试下来跟本问题无关，因为不管此js文件为空还是包含一个 function test2333(){} 这样的内容，都会引发策略变更导致esm方案的网站发生错误
回复 wgtyvgxyusgxu: 因为没有提供复现工程，我先建了一个工程 html 5 plus https://gitcode.net/dcloud/5plus-demo/-/blob/main/plus/webview_embed.html 我运行这个文件，使用 安卓模拟器运行，发现可以正常运行 js 弹窗两次 alert，没有发现你的问题。
在 uni-app 中使用 WebView 组件的 appendJsFile 方法时，可能会遇到与网站顶层域策略（Top-Level Domain Policy）相关的问题。以下是可能的原因和解决方案：
1. 跨域问题
- 原因:
appendJsFile方法会将指定的 JavaScript 文件注入到 WebView 中，如果这个 JavaScript 文件来自不同的域，可能会触发浏览器的跨域安全策略，导致脚本无法正常执行。 - 解决方案: 确保注入的 JavaScript 文件与 WebView 加载的页面处于同一域，或者使用 CORS（跨域资源共享）策略来允许跨域请求。
2. 同源策略
- 原因: 浏览器的同源策略（Same-Origin Policy）限制了不同源之间的交互，如果
appendJsFile注入的脚本试图访问或修改不同源的内容，可能会被浏览器阻止。 - 解决方案: 确保注入的脚本与 WebView 加载的页面同源，或者通过
postMessage等方法进行跨域通信。
3. Content Security Policy (CSP)
- 原因: 如果 WebView 加载的页面设置了严格的 Content Security Policy（CSP），可能会阻止外部 JavaScript 文件的注入。
- 解决方案: 检查页面的 CSP 设置，确保允许注入的 JavaScript 文件被执行。如果可能，调整 CSP 策略以允许所需的脚本。
4. WebView 配置问题
- 原因: 在某些情况下，WebView 的配置可能限制了外部 JavaScript 文件的注入或执行。
- 解决方案: 检查 WebView 的配置，确保允许 JavaScript 文件的注入和执行。可能需要调整 WebView 的
settings或WebSettings。
5. 异步加载问题
- 原因: 如果
appendJsFile注入的脚本是异步加载的，可能会导致脚本在页面加载完成之前或之后执行，从而引发问题。 - 解决方案: 使用
document.addEventListener('DOMContentLoaded', ...)或window.onload来确保脚本在页面加载完成后执行。
6. 调试与日志
- 建议: 使用浏览器的开发者工具（如 Chrome DevTools）来调试 WebView 中的 JavaScript 执行情况，查看是否有错误或警告信息，并根据日志进行调整。
7. 使用其他方法
- 替代方案: 如果
appendJsFile导致的问题无法解决，可以考虑使用其他方法来注入 JavaScript，例如通过evaluateJavaScript方法直接执行 JavaScript 代码。
示例代码
// 使用 evaluateJavaScript 方法直接执行 JavaScript 代码
uni.createWebViewContext('webview').evaluateJavaScript('alert("Hello, world!");');