uni-app中render如何获取webview的window对象?

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app中render如何获取webview的window对象?

uniapp app中render.js想要获取webview 中的window 对象???

信息类型 详情
开发环境 uniapp
版本号 未提及
项目创建方式 未提及
1 回复

在uni-app中,直接通过render函数获取WebView的window对象并不常见,因为render函数主要用于Vue组件的渲染逻辑,而WebView通常作为一个独立的浏览器上下文存在,其window对象不在同一个作用域内。不过,你可以通过一些间接的方法来与WebView进行交互。

以下是一个通过uni-app中的plus.webview API与WebView交互,并获取其内容的示例。注意,这里的代码主要使用HBuilderX开发环境下的5+ App(DCloud平台)特性。

  1. 创建并显示WebView
// 在页面的onLoad或mounted生命周期中
const webview = plus.webview.create('https://example.com', '_blank', {
    top: '0px',
    bottom: '0px'
});
webview.show();
  1. 注入JavaScript代码到WebView

你可以通过evalJS方法向WebView注入JavaScript代码,以获取其window对象的信息(虽然不能直接获取window对象本身,但可以通过执行JavaScript代码获取所需信息)。

webview.evalJS(`
    (function() {
        return {
            url: window.location.href,
            title: document.title
        };
    })();
`, (result) => {
    console.log('WebView信息:', result);
});
  1. 监听WebView中的事件

通过监听WebView中的事件(如loaded),你可以知道何时WebView内容已加载完成,然后执行相应的操作。

webview.addEventListener('loaded', (e) => {
    console.log('WebView已加载完成');
    // 在这里可以安全地调用evalJS等方法
    webview.evalJS(`console.log('This is a message from the parent app');`);
});
  1. 与WebView进行双向通信

为了更复杂的交互,你可以通过postMessageaddEventListener('message')在父页面和WebView之间进行通信。

父页面代码

// 发送消息到WebView
webview.postMessage({ message: 'Hello from parent' });

// 监听来自WebView的消息
window.addEventListener('message', (event) => {
    if (event.source === webview) {
        console.log('Received message from WebView:', event.data);
    }
});

WebView中的JavaScript代码

// 监听来自父页面的消息
window.addEventListener('message', (event) => {
    console.log('Received message from parent:', event.data);
    // 发送消息回父页面
    event.source.postMessage({ message: 'Hello from WebView' });
});

通过上述方法,你可以在uni-app中与WebView进行交互,虽然不能直接获取WebView的window对象,但可以通过执行和监听JavaScript代码来实现所需的功能。

回到顶部