uniapp的web-view怎么获取界面标签

页面加载完成后怎么获取输入框标签

需求:页面加载成功会自动填充账号、密码并点击登录按钮

img

<template>
    <view>
        <web-view  src="https://passport.baidu.com/v2/?login"></web-view>
    </view>
</template>

引用 皆我百晓生 小程序回复内容作答:
要获取输入框标签,可以使用JavaScript和DOM操作来实现。

首先,在页面加载完成后,你可以使用window.onload或者监听DOMContentLoaded事件的方式,确保页面已经完全加载。

在页面加载完成后,你可以通过以下步骤来获取输入框标签:

  1. 获取Web View元素:首先,你需要获取到Web View元素。在Vue中,你可以给Web View元素添加ref属性来引用它。

例如,在模板中给Web View元素添加ref属性:

<template>
    <view>
        <web-view ref="myWebView" src="https://passport.baidu.com/v2/?login"></web-view>
    </view>
</template>
  1. 获取输入框标签:在JavaScript中,你可以使用querySelector或者getElementById等DOM方法来获取输入框标签。
// 在Vue组件的mounted钩子中获取输入框标签
mounted() {
    const webView = this.$refs.myWebView.$el;

    // 获取输入框标签
    const inputs = webView.contentDocument.querySelectorAll('input[type="text"]');

    // 遍历输入框标签
    inputs.forEach(input => {
        // 在此处执行对输入框的操作,如填充账号和密码
        // input.value = 'Your Account';
    });
},

上述代码示例中,通过querySelectorAll方法选择所有input标签,并指定type属性为text,这样可以获取到所有的文本输入框。

然后,你可以遍历这些输入框,并在遍历循环中执行相应的操作,例如填充账号和密码。

需要注意的是,获取Web View内容的方式可能因Web View的具体实现而有所不同。上述代码示例假设Web View元素是通过Vue的ref属性进行引用的,并通过$el属性获取真实的DOM元素,然后通过contentDocument属性来访问Web View的文档对象。

请注意,由于跨域问题,获取外部网页的内容可能会受到限制。如果是不同域的页面,可能需要通过其他方式解决跨域问题。

最后,你可以根据需求,在填充账号密码后,使用click方法来模拟点击登录按钮。例如:

// 模拟点击登录按钮
const loginButton = webView.contentDocument.querySelector('button[type="submit"]');
loginButton.click();

通过以上方法,你可以在页面加载成功后自动填充账号密码并点击登录按钮。请根据实际情况进行相应的调整和处理。