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

Question

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

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

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

Answer 1

引用 皆我百晓生 小程序回复内容作答：
要获取输入框标签，可以使用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();

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