Javascript UWP - 如何为不在主 html 页面中的按钮插入处理程序？答案

【问题标题】：Javascript UWP - how can i insert an handler for a button which is not in the main html page?Javascript UWP - 如何为不在主 html 页面中的按钮插入处理程序？
【发布时间】：2017-01-28 12:41:48
【问题描述】：

我使用 Visual Studio 2015，已更新。我创建了一个新的UWP-js 应用程序：我有index.html、default.css 和main.js。我有一个名为play 的按钮和一个注册的eventListener，它可以更改窗口并可视化另一个HTML 页面，另一个名为quit 的按钮会关闭窗口。 main.js的代码是：

(function () {
    "use strict";
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var isFirstActivation = true;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {

        } else {
            if (args.detail.previousExecutionState == activation.ApplicationExecutionState.terminated) {

            }
        }

        if (!args.detail.prelaunchActivated) {

        }

        if (isFirstActivation) {

            document.addEventListener("visibilitychange", onVisibilityChanged);
            args.setPromise(WinJS.UI.processAll());

            var playbutton = document.getElementById("play");
            playbutton.addEventListener("click", playhandler, false);
            var quitbutton = document.getElementById("quit");
            quitbutton.addEventListener("click", closeApp, false);
        }

        isFirstActivation = false;
    };

    function onVisibilityChanged(args) {
        if (!document.hidden) {

        }
    }

    app.oncheckpoint = function (args) {

    };

    function playhandler(eventInfo) {//apro la tavola da disegno
        window.location("drawTable.html");
    }

    function closeApp(eventInfo) {//chiudo l'app
        window.close();
    }

    app.start();

})();

当我点击播放按钮时，会出现另一个 HTML 页面 (drawTable.html)，其中有一个名为 backbutton 的按钮。现在我想在点击时返回 index.html 页面。我在哪里可以注册这个按钮的处理程序？我尝试在我放置此函数的位置创建另一个 js 文件：

function backbuttonHandler() {
    window.location("index.html");
}

我也用 html 写过：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="lib/winjs-4.0.1/js/base.js"></script>
    <script src="lib/winjs-4.0.1/js/ui.js"></script>
    <link href="/css/drawTable.css" rel="stylesheet" />
    <script type="text/javascript" src="/js/drawTable.js"></script>
</head>
<body>
    <center>
        <button class="myButton" id="backbutton" onclick="backbuttonHandler()">back</button>
    </center>
</body>
</html>

但它不起作用！

【问题讨论】：

标签： javascript html css visual-studio-2015 uwp

【解决方案1】：

现在我想在点击时返回 index.html 页面。我在哪里可以注册这个按钮的处理程序？ ...但它不起作用！

由于安全原因，UWP 不支持内联 javascript，所以它不起作用。所以<button class="myButton" id="backbutton" onclick="backbuttonHandler()">back</button>之类的代码不会触发backbuttonHandler。

要解决这个问题，你需要在JS中附加事件处理程序：

window.onload = function () {
    document.getElementById("backbutton").onclick = function (evt)
    {
        window.location("index.html");
    }
}

还有一个建议：如果你想创建一个真正的 UWP App，强烈建议将你的应用设为Single Page Application。

【讨论】：