Pepper平板应用调用ALTabletService打开URL白屏问题求助

问题 #

开发应用时，用户点击搜索按钮需跳转至指定URL，使用NAOqi 2.5环境下的ALTabletService::showWebview方法实现，但点击按钮后平板显示白屏，无法正常加载网页。

问题代码 #

main.js

document.addEventListener("DOMContentLoaded", function(event) {
    var session = new QiSession();

    session.socket().on('connect', function () {
        console.log("Connected!");

        // Subscribe to the TabChosen/Name event
        session.service("ALMemory").done(function(mem) {
            mem.subscriber("TabChosen/Name").done(function (sub) {
                sub.signal.connect(tabCallback);
            });
        });

    }).on('disconnect', function () {
        console.log("Disconnected");
    });

    function showWebviewURL(url) {
        console.log("Showing webview with URL: ", url);
        session.service("ALTabletService").done(function (tablet) {
            tablet.ALTabletService::showWebview(url); // Use the showWebview method with URL
        });
    }

    function showWebviewWithEncodedURL() {
        var encodedURL = encodeURIComponent('https:www.google.com');
        showWebviewURL(encodedURL);
    }

    function tabCallback(tab) {
        console.log("A new tab has been selected:", tab);
        // Handle tab selection as needed
    }

    // Other functions and event handlers...
});

HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=1280, user-scalable=no" />
    <script src="/libs/qi/2/qi.js"></script>
    <script src="main.js"></script>
    <link media="screen" href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
    <nav class="nav">
        <button id="welcome" class="tab_buttons" onclick="tabCallback('welcome')" style="width:100%" type="button">Welcome</button>
    </nav>
    <div class="row">
        <div class="column">
            <button id="PositionD" class="tab_buttons" onclick="showWebviewURL('https://www.google.com')" style="width:100%" type="button">Book Search</button>
        </div>
        <div class="column">
            <!-- Encode the URL using JavaScript's encodeURIComponent() in the onclick attribute -->
            <button id="ShowWebviewButton" class="tab_buttons" onclick="showWebviewWithEncodedURL()" style="width:100%" type="button">Book Search</button>
        </div>
    </div>
</body>
</html>

解决方案 #

1. 修复showWebview方法调用语法错误 #

在NAOqi JavaScript API中，获取ALTabletService实例后直接调用方法即可，无需添加ALTabletService::前缀。原代码中的错误调用：

tablet.ALTabletService::showWebview(url);

需改为：

tablet.showWebview(url);

2. 修正URL格式与编码问题 #

• 原showWebviewWithEncodedURL函数中的URL缺少双斜杠，https:www.google.com应改为https://www.google.com
• 禁止对完整URL执行encodeURIComponent编码，该方法仅用于编码URL中的参数部分，完整URL编码后会导致服务无法识别，直接传入原始正确URL即可。

修改后的showWebviewWithEncodedURL函数：

function showWebviewWithEncodedURL() {
    var url = 'https://www.google.com';
    showWebviewURL(url);
}

3. 检查网络与权限配置 #

• 确保机器人平板已连接可用网络，能正常访问目标URL
• 确认应用manifest.xml中已添加网络权限声明：

<uses-permission android:name="android.permission.INTERNET" />

4. 增强异步调用稳定性（可选） #

在调用showWebview前检查会话连接状态，并添加错误捕获：

function showWebviewURL(url) {
    if (!session.socket().isConnected()) {
        console.log("Session not connected, cannot show webview");
        return;
    }
    console.log("Showing webview with URL: ", url);
    session.service("ALTabletService")
        .done(function (tablet) {
            tablet.showWebview(url);
        })
        .fail(function(error) {
            console.error("Failed to get ALTabletService: ", error);
        });
}

内容的提问来源于stack exchange，提问作者Uday Kumar