Question

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

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

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

Answer 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>

在Crossrider Popup中更改HTML页面

1 个答案: