uniapp webview注入代码
【代码】uniapp webview注入代码。
·
index.js
// 内置控制台--start
var __all_vconsole = document.querySelectorAll("script[data-type=vconsole]");
if (!__all_vconsole.length) {
var __script_vconsole = document.createElement("script");
__script_vconsole.type = "text/javascript";
__script_vconsole.setAttribute('data-type', 'vconsole')
__script_vconsole.src = "https://cdn.bootcdn.net/ajax/libs/vConsole/3.0.0/vconsole.min.js";
__script_vconsole.onload = function(e) {
var __all_newVConsole = document.querySelectorAll("script[data-type=newVConsole]");
if (!__all_newVConsole.length) {
var __script_newVConsole = document.createElement("script");
__script_newVConsole.type = "text/javascript";
__script_vconsole.setAttribute('data-type', 'newVConsole')
__script_newVConsole.text = "var vConsole = new VConsole();";
document.head.appendChild(__script_newVConsole);
}
}
document.head.appendChild(__script_vconsole);
}
// 内置控制台--end
// 页面监听--start
// var __script_observer = document.createElement("script[data-type=observer]");
// __script_observer.type = "text/javascript";
// __script_observer.text = `
// `;
// document.body.appendChild(__script_observer);
// 上面这样创建可以找到当前script,以便有删除操作
// 创建一个观察器实例并传入回调函数
var __bodyNode = document.querySelector('body');
// 观察器的配置(需要观察什么变动)
var __config = {
attributes: false, //目标节点的属性变化
childList: true, //目标节点的子节点的新增和删除
characterData: true, //如果目标节点为characterData节点(一种抽象接口,具体可以为文本节点,注释节点,以及处理指令节点)时,也要观察该节点的文本内容是否发生变化
subtree: true, //目标节点所有后代节点的attributes、childList、characterData变化
};
var __observer = new MutationObserver(function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
for (let mutation of mutationsList) {
console.log('====mutation:', mutation);
}
});
// 以上述配置开始观察目标节点
__observer.observe(__bodyNode, __config);
// 页面监听--end
// 全局点击事件--start
document.addEventListener('click', e => {
console.log('==========全局点击事件:', e);
// var __script_a = document.createElement("a");
// __script_a.src = "http://wap.baidu.com/";
// __script_vconsole.setAttribute('data-type', 'a')
// document.body.appendChild(__script_a);
})
// 全局点击事件--end
webview.vue
<template>
<view>
<web-view :src="url"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url: '', // 地址
title: '', // 标题
}
},
onLoad(option) {
// 外部传入的地址
let tUrl = option.url
delete option.url
// 外部传入的标题
this.title = option.__title__
delete option.__title__
// 外部传入的其他参数
let tParams = ''
for (const [key, value] of Object.entries(option)) {
tParams += `&${key}=${value}`
}
// 拼接最终的地址
this.url = tUrl + tParams
},
onReady() {
// #ifdef APP-PLUS
var currentWebview = this.$scope.$getAppWebview();
setTimeout(() => {
// 官网说每个页面都是一个webview,所以页面内的webview是它的子孩子
let wv = currentWebview.children()[0]
// 1. 先设置标题名为外部传入的标题,加载完成后更新标题(不传也可以,是为了防止加载完成后获取标题失败的情况)
wv.setStyle({
titleNView: {
titleText: this.title,
autoBackButton: true
}
})
// 加载中状态
wv.addEventListener('loading', function() {
plus.nativeUI.showWaiting()
// console.log(wv.getURL()) //获取url
// console.log(wv.getTitle()) //获取标题
}, false);
// 加载完成状态
wv.addEventListener('loaded', () => {
// 注入JS,此处是根目录下的static/injection/index.js
wv.setJsFile('_www/static/injection/index.js')
plus.nativeUI.closeWaiting();
// 2. 获取页面自带的标题,下面的校验是因为客户不想暴漏url
let title = wv.getTitle()
title = /(http|https):\/\/([\w.]+\/?)\S*/.test(title) ? '' : title
if (/(http|https):\/\/([\w.]+\/?)\S*/.test('http://' + title)) {
title = ''
}
if (!title.trim()) return
wv.setStyle({
titleNView: {
titleText: title,
}
})
// 此处可以拦截窗口url请求,详见备注
// wv.overrideUrlLoading({
// mode: 'reject',
// match: '.*'
// }, function(e) {
// console.log('reject url: ' + e.url);
// });
}, false);
}, 200)
// #endif
},
}
</script>
备注
- 拦截窗口url请求:overrideUrlLoading
- 设置预加载的文件:setJsFile(JS文件) ,setCssFile(CSS文件)
更多推荐
已为社区贡献1条内容
所有评论(0)