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

时间:2015-11-01 08:02:04

标签: javascript jquery html

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

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

我的代码如下:

<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>

3 个答案:

答案 0 :(得分:5)

您的页面会刷新,因为您的函数不仅会被调用,还会被调用 执行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');"

布局和代码分离

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

这可以按如下方式完成:

<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()

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

答案 1 :(得分:4)

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>

答案 2 :(得分:0)

只需在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);">