0

Using The Notifications APIの指示に従いました。また、パーツのdocument.querySelector()内部を追加したため、次のような多くの問題に直面しました。<head>

Uncaught TypeError: Cannot call method 'addEventListener' of null

これで、以下のソースが得られました。ここで、Check Notification SupportとCheck Notification Permissionsのリンクを確認できます。

より簡単な方法で通知を表示する方法を教えてください。また、私はこれを試しました：

$("#html").click(function() {
    if (window.webkitNotifications.checkPermission() == 0) {
        createNotificationInstance({ notificationType: 'html' });
    } else {
        window.webkitNotifications.requestPermission();
    }
});

今、私はこのソースにこだわっています。HTML とシンプルな通知を生成する必要があります。何か不足していますか？私を案内してください。

ソース：

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>Desktop Notifications</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            function checkNotifications() {
                if (window.webkitNotifications)
                    alert("Notifications are supported!");
                else
                    alert("Notifications are not supported for this Browser/OS version yet.");
            }
            function createNotificationInstance(options) {
                if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
                    if (options.notificationType == 'simple') {
                        return window.webkitNotifications.createNotification('icon.png', 'Notification Title', 'Notification content...');
                    } else if (options.notificationType == 'html') {
                        return window.webkitNotifications.createHTMLNotification('http://localhost/');
                    }
                } else {
                    window.webkitNotifications.requestPermission();
                }
            }
        </script>
        <style type="text/css">
            * {font-family: Verdana, sans-serif;}
            body {font-size: 10pt; margin: 0; padding: 0;}
            p {margin: 5px;}
            a {color: #09f; text-decoration: none;}
            a:hover {color: #f00;}
        </style>
    </head>
    <body>
        <p><strong>Desktop Notifications</strong></p>
        <p>Lets see how the notifications work in this browser.</p>
        <p>
            <a href="#" onclick="checkNotifications(); return false;">Check Notification Support</a>.
            Next <a href="#" onclick="alert('Notifications are ' + ((window.webkitNotifications.checkPermission() == 0) ? '' : 'not ') + 'allowed!'); return false;">Check Notification Permissions</a>
            and if permissions are not there,
            <a href="#" onclick="window.webkitNotifications.requestPermission(); return false;">Request Permissions</a>.
            Create a
            <a href="#" id="text">Simple Notification</a>
            or
            <a href="#" id="html">HTML Notification</a>.
        </p>
    </body>
    <script type="text/javascript">
        document.querySelector("#html").addEventListener('click', function() {
            if (window.webkitNotifications.checkPermission() == 0) {
                createNotificationInstance({ notificationType: 'html' });
            } else {
                window.webkitNotifications.requestPermission();
            }
        }, false);
        document.querySelector("#text").addEventListener('click', function() {
            if (window.webkitNotifications.checkPermission() == 0) {
                createNotificationInstance({ notificationType: 'simple' });
            } else {
                window.webkitNotifications.requestPermission();
            }
        }, false);
    </script>
</html>
4

1 に答える 1

4

通知を作成した後、それを呼び出す必要があるshow()ので、単に：

createNotificationInstance({ notificationType: 'simple' });

あなたがする必要があります：

var n = createNotificationInstance({ notificationType: 'simple' });
n.show();

もう1つは、jQueryコードを実行するときに、それを内部にラップすることです。

$(document).ready(function() {
  // ...
  // your jQuery code
  // ...
});

ヘッド内のjQueryを使用してDOMでアクションを実行する場合、DOMはまだビルドされていません。 $(document).readyDOMがビルドされ、保存してアクセスして操作できるようになるまで待機します。

これが実際の例です：http：//jsfiddle.net/fkMA4/

ところで：HTML通知は非推奨だと思います。ここを参照してください：http ：//www.html5rocks.com/en/tutorials/notifications/quick/？redirect_from_locale = de

HTMLコンテンツを含む通知は非推奨になりました。サンプルとテキストはそれに応じて変更されています。

于 2012-10-04T20:36:01.353 に答える