在同一个 Chrome 应用程序窗口中打开 HTML 文件？答案

【问题标题】：Open HTML file in same Chrome app window?在同一个 Chrome 应用程序窗口中打开 HTML 文件？
【发布时间】：2016-06-06 22:24:03
【问题描述】：

阿罗哈，

我正在尝试制作一个 Chrome App 来替换 Chrome 开发编辑器。这是我目前拥有的：

background.js

chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('backstage.html', {
    'outerBounds': {
        'width': 1036,
        'height': 583
    }
  }); 
});

后台.html

<!DOCTYPE html>
<html>
<head>
    <title>Celestia Pro</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel = "stylesheet" href = "material.css">
    <link rel = "stylesheet" href = "material.min.css">
    <link rel = "stylesheet" href = "styles.css">
</head>

<body>
<!-- The drawer is always open in large screens. The header is always shown,
  even in small screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
            mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <div class="mdl-layout-spacer"></div>
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
                  mdl-textfield--floating-label mdl-textfield--align-right">
        <label class="mdl-button mdl-js-button mdl-button--icon"
               for="fixed-header-drawer-exp">
          <i class="material-icons">search</i>
        </label>
        <div class="mdl-textfield__expandable-holder">
          <input class="mdl-textfield__input" type="text" name="sample"
                 id="fixed-header-drawer-exp">
        </div>
      </div>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content">
<style>
.demo-card-wide.mdl-card {
  width: 100%;
}
.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 176px;
  background: url('welcome-card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
  color: #fff;
}

div.start-cards {
    padding-top: 25px;
    padding-left: 50px;
    padding-right: 50px;
}
</style>

<div class="start-cards" align = center>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Welcome to Celestia Pro</h2>
  </div>
  <div class="mdl-card__supporting-text">
    Celestia Pro is a new integrated development environment (IDE) that allows developers to create Chrome apps quickly and efficiently. We're still in our baby stages, but we hope this tool works for you.
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="runWizard()">
      Get Started
    </a>
    <script>

    </script>
  </div>
    </button>
  </div>
</div>

    </div>
  </main>
</div>
</div>
    <script src = "./material.min.js">
    <script src = "./material.js">

</body>
</html>

在我尝试使我提到的 Get Started 按钮实际打开某些东西之前，这看起来一切都很好。我希望它打开一个名为“backstage2.html”的页面，但无论我尝试什么组合，它似乎都不起作用。这是我尝试过的。

<a href=""> 方法
通过向按钮添加脚本（“runWizard()”）使用chrome.app.window.current and/or chrome.app.window.create 脚本

这些似乎都不起作用。我希望能够在同一个 Chrome 应用程序窗口中打开 backstage2.html！如果可能的话，我怎么能做到这一点？非常感谢任何帮助。

【问题讨论】：

标签： javascript css json html google-chrome-app

【解决方案1】：

您可能希望使用 Web 组件并将文件导入主文件。然后，您可以将其用作常规 Web 组件。其他选项是将请求发送到后台页面，您可以在其中保存对打开窗口的引用。此引用具有 contentWindow 属性，它是 JavaScript 的 window 对象。您可以使用它来替换 man 窗口的内容（在您使用例如 fetch 读取新文件数据之后）。

【讨论】：

【解决方案2】：

使用 href="你的 html 文件" target="_self"

【讨论】：

欢迎来到 Stack Overflow。对于未来，请尝试详细解释您的答案。另外，请阅读 Stack Overflow 上的 formatting，并将您的代码包装在代码标签中。请访问help center 了解更多信息。
这将在浏览器中打开一个链接，这不是作者问题的答案。此外，您无法在 chrome 选项卡中打开应用程序的文件，因此它不起作用。

【解决方案3】：

您可以在backstage.html 中使用webview（或在新窗口中）。

可能是……

backstage.html：

<a id="wizard" class="···">Get Started</a>
<!-- onclick doesn't work by CSP (see note bellow) ··· -->
<webview></webview>
<!-- ··· -->
<script src="./main.js"></script>

main.js：

onload = function {
  // ···
  document.querySelector('#wizard').addEventListener('click', runWizard);
  // ···
};
// ···
function runWizard() {
  // ···
  document.querySelector('webview').src = 'backstage2.html';
  // ···
};

CSP -内容安全策略-，注意： "You can’t use inline scripting..."

@abarisone：谢谢！

【讨论】：