Question

当我点击下面代码中的链接时：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<div id="modal_open" class="modal fade" role="document">
    <div class="modal-dialog custom-modal-size">
        <div class="modal-content">
            text
        </div>
    </div>
</div>

<a href="javascript:void(0);" data-toggle="modal" data-target="#modal_open" ng-controller="ModalDemoCtrl">link</a>

如果我打开了Chrome调试器，我会收到jquery.min.js:4 XMLHttpRequest cannot load javascript:void(0);. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.消息。虽然代码按预期工作，但我试图理解为什么我收到此消息。有人可以解释一下吗？

Answer 1

在您的链接代码中，您href="javascript:void(0);"会抛出错误。如果删除它，则错误消失。

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<div id="modal_open" class="modal fade" role="document">
    <div class="modal-dialog custom-modal-size">
        <div class="modal-content">
            text
        </div>
    </div>
</div>

<a data-toggle="modal" data-target="#modal_open" ng-controller="ModalDemoCtrl">link</a>

Answer 2

您是否使用Chrome并从文件系统中打开了html脚本？

Firefox或网络服务器应该解决这个跨域问题。

Answer 3

HREF = “JavaScript的：无效（0）;”

导致它

Answer 4

您可以将href设置为＃，然后单击event.preventDefault(或return false来实现类似的目的

<a href="#" onclick="return false;" data-toggle="modal" data-target="#modal_open" ng-controller="ModalDemoCtrl">link</a>

OR

<a href="#" onclick="event.preventDefault()" data-toggle="modal" data-target="#modal_open" ng-controller="ModalDemoCtrl">link</a>

仅支持跨源请求

4 个答案: