1

最近、kik サイトの開発をテストしたいと思っていました。kik starter-kit repositoryを fork してクローンを作成しました。私はセットアップに従い、次の簡単なスクリプトを書きました (スクリプトは if ステートメントなしで正常に実行されます)。

if (kik.enabled) {
    var div = document.getElementById("main_button");
    div.innerHTML = "KIK IS ENABLED!"
}

これは、Web ページのメイン ボタンのテキストを「KIK IS ENABLED!」に変更することになっています。サイトが kik アプリを介して実行されている場合。を使用して、ローカル ネットワークでデバッグ サーバーを起動します。

npm start

電話でkikを起動し、ブラウザに移動してサーバーに接続します。正常に接続され、Web ページが表示されます。唯一の問題は、ボタンのテキストが変更されていないことです。これは、kik アプリを実行しても、kik が有効になっていないことを示唆しています。

何が原因なのかわかりません。kik を有効にするには、オンライン Web サーバー上で Web サイトを実行する必要がありますか?

関連するコードは次のとおりです。

index.html

<!DOCTYPE html>
<html manifest="manifest.appcache">
    <head>
        <!-- App info -->
        <title>Starter Kit</title>
        <meta charset="utf-8">
        <meta name="description" content="My amazing app!">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="kik-transparent-statusbar" content="black">
        <meta name="kik-hide-form-helpers" content="true">
        <link rel="kik-icon" href="/img/icon.png">

        <!-- Styles -->
        <link rel="stylesheet" href="//cdn.kik.com/app/3.0.1/app.min.css">
        <link rel="stylesheet" href="/css/styles.css">
        <link rel="stylesheet" href="/css/home.css">
        <link rel="stylesheet" href="/css/page2.css">
    </head>

    <body>
        <!-- Pages -->

        <div class="app-page home-page" data-page="home">
            <div class="app-topbar red">
                <div class="app-title">Home page</div>
            </div>
            <div class="app-content">
                <div class="app-section">
                    <div id="main_button" class="app-button" data-target="page2">Go to Page 2</div>
                </div>
            </div>
        </div>

        <div class="app-page page2-page" data-page="page2">
            <div class="app-topbar red">
                <div class="app-button left" data-back data-autotitle></div>
                <div class="app-title">Page 2</div>
            </div>
            <div class="app-content">
                Page 2 is lonely
            </div>
        </div>

        <!-- Scripts -->
        <script src="/zerver/API.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.3/zepto.min.js"></script>
        <script src="//cdn.kik.com/kik/1.0.22/kik.js"></script>
        <script src="//cdn.kik.com/app/3.0.1/app.min.js"></script>
        <script src="/controller/home.js"></script>
        <script src="/controller/page2.js"></script>
        <script src="/main.js"></script>
    </body>
</html>

home.js

if (kik.enabled) {
    var div = document.getElementById("main_button");
    div.innerHTML = "KIK IS ENABLED!"
}
4

2 に答える 2

1

これ： document.getElementById("main_button")

次のようにする必要があります。page.querySelector("#main_button")

App.js は、ユーザーがナビゲートする新しいページを作成するときに、ドキュメント内の HTML ページをテンプレートとして使用します。のコントローラーはhome.js、ページをセットアップして実行するための自給自足の方法であると想定されています。

したがって、発生する必要があるクエリは次のとおりpage.querySelector("#main_button")です。これは、page要素がまだ DOM に関連付けられていない可能性があるため、document.querySelector がそれを見つけることができないためです。

于 2015-04-13T13:27:20.540 に答える
0

これはまだ問題ですか？

home.js が他に何かを行っているかどうかはわかりませんが、すぐに使えるクロージャーに入れることをお勧めします。JQuery の$(function(){})、またはkik.ready

例：

home.js

kik.ready(function() {

    if (kik.enabled) {
        var div = document.getElementById("main_button");
        div.innerHTML = "KIK IS ENABLED!"
    }

}
于 2015-03-08T15:18:23.863 に答える