在 Crossrider 弹出窗口中更改 HTML 页面答案

【问题标题】：Change HTML Page in Crossrider Popup在 Crossrider 弹出窗口中更改 HTML 页面
【发布时间】：2015-10-03 09:13:54
【问题描述】：

我有一个名为 picker.html 的弹出窗口，其中包含两个选项 - 转到选项页面（crossrider 本身不支持）或打开网页。可能还有更多选择。

现在，当按下“转到选项”按钮时，我想将弹出窗口更改为转到文件 options.html。

我尝试使用appAPI.browserAction.setPopup，但它只有在再次单击浏览器操作后才能工作，使其无用。 window.location 也不起作用，因为 crossrider 总是使用 background.html 并且没有 API 来获取资源文件的路径。

【问题讨论】：

标签： javascript jquery crossrider

【解决方案1】：

您可以使用document.open 和appAPI.resources.get 更改整个HTML。然后你需要运行crossriderMain 来确保所有使用的资源都被加载了。

请参阅下面的工作示例。根据我的经验，无法更改新弹出窗口/页面的高度，如果有人发现经过测试的可能性（CSS 似乎在这里不起作用），请编辑此答案。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function crossriderMain($) {
                appAPI.resources.includeCSS('html/bootstrap.min.css');
                appAPI.resources.includeCSS('html/skin.css');

                appAPI.resources.includeJS('js/bootstrap.min.js');
            }

            appAPI.ready(function($) {
                $("#gooptions").click(function() {
                    var newDoc = document.open("text/html", "replace");
                    newDoc.write(appAPI.resources.get('options.html'));
                    newDoc.close();

                    $("body").css("width","400px");
                    crossriderMain($);

                    eval(appAPI.resources.get('js/bootstrap.min.js')); 
                    //Use eval with any JS you need to load for the new page, it won't be loaded from crossriderMain($)!
                });
                $("#goproton").click(function() {
                    appAPI.openURL({url: "https://protonmail.ch/login", where:"tab", focus:true});
                    window.close();
                });
            }); 
        </script>
    </head>
    <body>
        <div class="well bs-component" style="margin:0; border-radius:0; border:none; padding:5px;">
            <div class="form-horizontal">
              <div class="col-lg-12" style="margin-bottom:5px; padding:0;">
                <button type="submit" class="btn btn-default" id="gooptions" style="width:100%;">Go to Options</button>
              </div>
              <div class="col-lg-12" style="padding:0;">
                <button type="submit" class="btn btn-primary" id="goproton" style="width:100%;">Open ProtonMail</button>
              </div>
            </div>
        </div>
    </body>
</html>

【讨论】：