Question

当我点击链接打开子窗口时，父页面会自动刷新。我怎么能阻止它？

打开子窗口时，不应刷新父页面。这该怎么做？请帮帮我。

我的代码如下：

<html>
<head>
<title>login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
var popup;
function ShowPopup(url) {
if(popup)
    {
     popup.close();
     }
    popup = window.open(url, "self", "toolbar=no,scrollbars=yes,location=no,statusbar=no,menubar=no,resizable=0,width=300,height=350,left = 0,top = 0");
        popup.focus();
 }
</script>

</head>

<body>
<a href="" onclick="ShowPopup('popup_login.asp')" style="color: #1686CC;">Sign In / Register</a>
</body>
</html>

Answer 1

您的页面会刷新，因为您的函数不仅会被调用，还会被调用执行a标记指示的超链接。所以你发生了两件事同时：

超链接本身导航到href属性中的任何内容，即使它是空的。如果href为空，则表示：重新加载此页面。
onclick事件处理程序也执行某些操作（打开弹出窗口），但它目前没有取消第一个效果。

在第一个反应中，人们可能会删除有问题的href 属性。这解决了这个问题，但又引入了另一个问题：你失去了所有的好处在显示的超链接文本上设置样式（如下划线，颜色，更改光标，Tab键顺序......），这通常不是你想要的。

以下是一些更方便的解决方案：

让onclick事件处理程序返回false

返回false将取消锚点的默认行为，href属性的内容将被忽略：

onclick="ShowPopup('popup_login.asp'); return false;"

如果你关心没有javascript支持的浏览器（或禁用它），那么就放 url属性中有意义的后退href，例如：

href="javascript_is_required.html"

使用event.preventDefault

这是return false的替代方案。它的优点是你可以做到执行作为第一条指令，以便在其他代码中发生运行时错误它已经完成了它的工作：

onclick="event.preventDefault();ShowPopup('popup_login.asp');"

请注意，此event对象由事件属性上下文中的所有浏览器定义，并且要区别于window.event对象，而不受其支持所有浏览器。

在href

中使用哈希表示法

给锚一个名字然后在href属性中引用该名称。这条路锚将自己导航到视图中它通常已经是用户点击它时：

name="loginlink" href="#loginlink"

您经常会看到较短的变体href="#"，但这会将页面滚动到顶部单击时，如果您确定页面未向下滚动，则可能没问题。尽管如此，使用“＃”会产生副作用：点击url时会发生变化之前的url放在浏览器的历史堆栈中。因此，如果点击链接后按下后退按钮，你留在页面上。这可能是不受欢迎的。

使用javascript:协议无效

href="javascript:"

这将使超链接执行冒号之后的任何javascript，并且从那里开始没有，没有任何事情会发生。浏览器历史记录未被修改。有变化对于此方法，例如javascript: return false;或javascript: void(0);

使用javascript:协议处理click事件

使用此解决方案，您不再使用onclick属性。而是移动代码到href属性：

href="javascript: ShowPopup('popup_login.asp');"

布局和代码分离

原始代码和上述所有解决方案仍然存在许多开发人员的问题不喜欢：HTML与javascript代码混合在一起。最好将这两者分开。

这可以按如下方式完成：

<a href="javascript_is_required.html" id="loginLink"
   title="Click here to log on"> ... </a>
...
<script>
    document.getElementById('mylink').onclick = function(e) {
        e = e || event; // cross-browser way to get event object
        e.preventDefault(); // cancel the default click behaviour
        ShowPopup('popup_login.asp'); // your custom code comes here
        return false; // cancel the default click behaviour
    };
</script>

有些人会这样说有一个缺点：识别点击执行的代码更难。上面的代码会将事件处理程序附加到mylink的click事件元件。确保在文档加载后才执行它。事件处理程序取消默认单击行为有两种方式。根据需要选择一个或两个。原样取消后，永远不会执行导航到href属性值。首先 line处理浏览器细节，因为较旧的IE浏览器不传递事件对象作为事件处理程序的参数，但代之以公开全局event对象。

如果您不必支持IE9之前的浏览器，则可以使用以下方法来提高效率 addEventListener('click', myfunction);代替onclick = myfunction; 上面的代码。这有许多优点：可以将更多事件处理程序附加到其上事件，您也可以逐个删除它们。 jQuery提供良好的跨浏览器支持对于此.on()。

以上解决方案有以下几种变体，全部都有好处和缺点。你甚至可以为此目的而不再使用锚并使用另一个元素而不是添加样式。

Answer 2

在false(); JS方法之后写回window.open()。

如果上述代码段不起作用，请使用<button>将默认<input>代码更改为普通type="button"代码。这将解决问题。

以下是代码段：

<强>的JavaScript

<script>
  function tagedlist() { 
    window.open("http://w3schools.com","mywindow","menubar=1,resizable=1,width=1000,height=1000");
    return false;           
  }
</script>

Answer 3

只需在type="button"标签中添加<button>即可。我知道这是多余的，但它有效！

从此：

<button id="btnDeleteRequest" class="btn btn-default"  accesskey="D" onclick="ExecuteCommand('DeleteRequest',this);">

对此：

<button id="btnDeleteRequest" class="btn btn-default" type="button" accesskey="D" onclick="ExecuteCommand('DeleteRequest',this);">

如何在子窗口打开时停止刷新父页面？

3 个答案: