Cordova JS 文件 - 未捕获的引用错误答案

【问题标题】：Cordova JS file - Uncaught Reference errorCordova JS 文件 - 未捕获的引用错误
【发布时间】：2017-12-09 14:50:06
【问题描述】：

我正在按照网站上的步骤设置 //www.svlconnectsdk.com /docs/1-6-0/cordova/discover-connect/

我已成功安装 SDK，构建并运行 Android 构建。我在屏幕上有按钮，但在选择按钮时出现未捕获的参考错误？

有人可以帮忙吗？

错误：

index.js:36 Uncaught ReferenceError: connectSDK is not defined
at Object.showDevicePicker (index.js:36)
at HTMLButtonElement.onclick (index.html:41)

我的 HTML

<meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;style-src * 'unsafe-inline' 'self' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;img-src * data: 'unsafe-inline' 'self' content:;fmedia-src mediastream;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Hello World</title>
</head>
<body>
    <div class="app">
        <h1>Apache Cordova</h1>
        <button onclick="app.showDevicePicker()">Select a TV</button>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <script type="text/javascript" src="js/index.js"></script>

我的 JS 文件

    [var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent('deviceready');
        app.setupDiscovery();
    },
    setupDiscovery: function () {
        connectSDK.discoveryManager.startDiscovery();
    },
    showDevicePicker: function () {
        connectSDK.discoveryManager.pickDevice();
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};
    app.initialize();

我意识到我的 HTML 中缺少 cordova.js 脚本：

新代码：

<html>
    <head>
        <!--
        Customize this policy to fit your own app's needs. For more guidance, see:

            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->
        <meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;style-src * 'unsafe-inline' 'self' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;img-src * data: 'unsafe-inline' 'self' content:;fmedia-src mediastream;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <button onclick="app.showDevicePicker()">Select a TV</button>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="../platforms/android/assets/www/cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

为 android 构建时仍然没有选择器。当我直接在 chrome 中加载 index.html 时，我现在得到以下弹出窗口。

https://i.stack.imgur.com/qwS9J.jpg https://i.stack.imgur.com/Q1L81.jpg

如果我取消弹出窗口，我会收到以下错误：

Unrecognized Content-Security-Policy directive 'fmedia-src'.

index.js:47 Received Event: deviceready

index.js:33 Uncaught ReferenceError: connectSDK is not defined
    at Object.setupDiscovery (index.js:33)
    at Object.onDeviceReady (index.js:30)
    at Channel.fire (cordova.js:822)
    at cordova.js:231
If i accept the pop ups i get these errors :

unrecognized Content-Security-Policy directive 'fmedia-src'.

25269 cordova.js:1083 processMessage failed: invalid message: ""

【问题讨论】：

谁能帮忙？

标签： cordova uncaught-exception

【解决方案1】：

首先你应该纠正这个错误：unrecognized Content-Security-Policy directive 'fmedia-src'.你这里有一个错误：

<meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;style-src * 'unsafe-inline' 'self' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;img-src * data: 'unsafe-inline' 'self' content:;fmedia-src mediastream;">

应该是：

<meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;style-src * 'unsafe-inline' 'self' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;img-src * data: 'unsafe-inline' 'self' content:;media-src mediastream;">

你写的是fmedia-src而不是media-src。

那么这里：

 initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    }

我认为您应该尝试删除.bind(this)，如下所示：

 initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    }

希望对你有帮助！

【讨论】：