在按钮上打开一个不同的选项卡，然后将其重定向到另一个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>

检查工作plunker：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并做您之前在问题中描述的事情。