Кнопка не активируется в приложении Cordova «Hello World»

1

я Создал новое приложение Кордовы и запустил команду cordova run ios команды cordova run ios чтобы получить экран модно по умолчанию.

Когда я добавляю кнопку, она не доступна. Я написал действие в чистом ваниле JS. Сначала я попытался вырвать действие кнопки в отдельный файл и импортировать его как файл сценария, но это тоже не сработало.

<html>
<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    <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>
    <script type="text/javascript" language="JavaScript">            
        //Create a new To-Do
        function createNewToDo()
        {
            alert('hi');
        }
    </script>
</head>
<body>
    <div class="app">
        <h1>Apache Cordova</h1>   

  /******** Both buttons not clickable     
            <button class="button" id="getDate">Get Date</button>
            <button type="button" class="addToDo" onclick="createNewToDo()">/>TO DO</button>            
  *********/
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

Теги:
cordova

2 ответа

1
Лучший ответ

Это из-за метатега Content-Security-Policy, он не разрешает onclick.

Просто отредактируйте его, чтобы разрешить onclick, добавив "unsafe-inline" в раздел default-src или в script-src. Пример:

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

BTW, если вы включите удаленную отладку для своего устройства и откройте Desktop Safari для проверки приложения, вы получите сообщение об ошибке, подобное этому:

Отказано в выполнении сценария для встроенного обработчика событий, потому что "unsafe-inline" не отображается ни в директиве script-src, ни в директиве default-src политики безопасности контента.

Поделиться
  • 0
    +1 за подсказку отладки. Я все это время тестировал на симуляторе. Вернемся с моими выводами.
  • 0
    Устройства должны отображаться на рабочем столе Safari на вкладке «Отладка» (я думаю, что вы должны включить режим разработчика в Safari или использовать Safari Technology Preview, который по умолчанию включен)
Показать ещё 2 комментария
0

Использовать следующим образом:

<html>
<head>
    <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">
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />

    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Hello World</title>
    <script type="text/javascript" language="JavaScript">            
        //Create a new To-Do
        function createNewToDo()
        {
            alert('hi');
        }
    </script>
</head>
<body>
    <div class="app">
        <h1>Apache Cordova</h1>   

       <!--- Both buttons not clickable   --->
            <button class="button" id="getDate">Get Date</button>
            <button type="button" class="addToDo" onclick="createNewToDo()">TO DO</button>            

    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню