在按钮单击时打开不同的选项卡并重定向到另一个 html

Question

我知道有类似的问题，但答案和建议对我不起作用，我无法理解错误。

单击按钮时，我想在新选项卡中加载另一个 HTML。当我尝试“www.google.com”时，我可以这样做。但是当我尝试加载我拥有的 HTML 时，我无法这样做。

这里是相关的html代码：

<div id="button">
    <a href="www.google.com"
       target="_blank"><input type="button" value="Visualisation"></a><!-- THIS WORKS -->
    <form action="/Users/tarun/Work/marchDemo/public/views/tree_custom.html"
          target="_blank">
        <input type="submit"
               value="Go to Google" />
    </form><!-- THIS Fails -->
    <input type=button
           onClick="location.href='tree_custom.html'"
           value='click here'
           target="_blank"><!-- THIS Fails -->
</div>

我得到的错误是这个，我无法调试：

Error: Not Found
        at /Users/tarun/Work/marchDemo/app.js:41:13
        at Layer.handle [as handle_request] (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/layer.js:95:5)
        at trim_prefix (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:312:13)
        at /Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:280:7
        at Function.process_params (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:330:12)
        at next (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:271:10)
        at /Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:618:15
        at next (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:256:14)
        at Function.handle (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:176:3)
        at router (/Users/tarun/Work/marchDemo/node_modules/express/lib/router/index.js:46:12)

Answer 1

您可以将onclick="window.open('tree_custom.html')" 与target="_blank" 一起使用，而不是使用location.href

<div id="button">
          <a href="www.google.com"
             target="_blank"><input type="button" value="Visualisation"></a><!-- THIS WORKS -->
          <form action="/Users/tarun/Work/marchDemo/public/views/tree_custom.html"
                target="_blank">
              <input type="submit"
                     value="Go to Google" />
          </form><!-- THIS works -->
          <input type=button  onclick="window.open('tree_custom.html')"
                 value='click here'
                 target="_blank"><!-- THIS WORKS -->
      </div>

检查工作插件：https://plnkr.co/edit/PQk5al?p=preview

Answer 2

如果您使用的是 Angular，我建议您使用 ng-click。然后，您可以将控制器中定义的方法绑定到ng-click。当用户单击您的按钮时，它将打开一个带有所需 URL 的新选项卡。

body.html
<div ng-controller="exampleCtrl as ctrl">
    <button ng-click="ctrl.directToGoogle()"></button>
</div>

index.js
angular.module('exampleModule', [])
       .controller('exampleCtrl', ['$scope', '$window', 
             function ($scope, $window) {
                  $scope.directToGoogle = function () {
                        $window.open('https://www.google.com', '_blank')
                  }])

这将是一个简单而人为的示例，说明如何将方法绑定到 ng-click 并执行您之前在问题中描述的操作。