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

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

javascript jquery html

Javascript 如何在子窗口打开时停止刷新父页面？,javascript,jquery,html,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 po

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

打开子窗口时不应刷新父页。如何做到这一点？请帮帮我

我的代码如下所示：

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


登录
var弹出窗口；
函数ShowPopup（url）{
如果（弹出）
{
popup.close（）；
}
打开（url，“self”，“toolbar=no，scrollbars=yes，location=no，statusbar=no，menubar=no，resizeable=0，width=300，height=350，left=0，top=0）；
popup.focus（）；
}

页面会刷新，因为不仅调用了函数，还调用了执行

标记指示的超链接。所以有两件事发生了
同时：

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

在第一个反应中，可能只是删除了冒犯的href
属性这解决了问题，但也带来了另一个问题：你失去了所有美好的事物
在显示的超链接文本上设置样式（如下划线、颜色、更改光标、选项卡顺序等），
这通常不是你想要的
以下是一些更方便的解决方案：
让onclick
事件处理程序返回false
返回false
将取消锚的默认行为，并且href
属性的内容将被忽略：
onclick="ShowPopup('popup_login.asp'); return false;" 

如果您关心不支持javascript（或禁用javascript）的浏览器，请将
在href
属性中有意义的回退url
，如：
href="javascript_is_required.html"

使用event.preventDefault
这是返回false的替代方法。它的优点是你能做到
作为第一条指令执行，以便在其他代码中发生运行时错误时
它已经完成了它的工作：
onclick="event.preventDefault();ShowPopup('popup_login.asp');"

请注意，此事件对象由所有浏览器在事件属性上下文中定义，
并且要与不受支持的window.event对象区分开来
所有浏览器
在href
中使用哈希表示法
给主播起个名字
然后在href属性中引用该名称。这边
锚点将自己导航到视图中，该视图
当用户单击它时，它通常已经存在：
name="loginlink" href="#loginlink" 

您经常会看到较短的变体href=“#”，但这会将页面滚动到顶部
单击时，如果您确定页面没有向下滚动，这可能是正常的。
尽管如此，使用“#”还是有一个副作用：单击url会发生变化，并且
上一个url被放在浏览器的历史堆栈上。因此，如果单击链接后按“后退”按钮，
你留在页面上。这可能是不希望的
使用javascript:
协议不执行任何操作
href="javascript:" 

这将使超链接执行冒号后面的任何javascript，并且
如果没有，什么也不会发生。不会修改浏览器历史记录。有很多变化
对于这个方法，比如javascript:returnfalse或javascript:void（0）
使用javascript:
协议处理单击事件

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

使用此解决方案，您不再使用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>


...
document.getElementById（'mylink'）。onclick=function（e）{
e=e | | event；//获取事件对象的跨浏览器方式
e、 preventDefault（）；//取消默认的单击行为
ShowPopup（'popup_login.asp'）；//您的自定义代码出现在这里
return false；//取消默认的单击行为
};

一些人也会这样说
有一个不利的方面：很难识别单击时执行的代码。
上面的代码将事件处理程序附加到mylink的click事件
元素。确保仅在加载文档后才执行。
事件处理程序取消默认的单击
行为有两个方面。选择一个你喜欢的，或者两者都可以。事实上
取消，将永远不会执行到href属性值的导航。第一
行处理浏览器细节，因为旧的IE浏览器不传递事件对象
作为事件处理程序的参数，但公开一个全局事件
对象
如果您不必支持IE9之前的浏览器，可以通过使用
addEventListener（'click'，myfunction）
而不是onclick=myfunction在
以上代码。这有很多优点：可以将更多的事件处理程序附加到同一个服务器
事件，您还可以逐个删除它们jQuery提供了良好的跨浏览器支持
为了这个
上述解决方案有几种变体，都有各自的特点
好处和坏处。你甚至可以不使用锚来达到这个目的
并使用另一个添加了样式的元素。
Write returnfalse（）
在window.open（）之后
JS方法
如果上述代码段不起作用，请使用type=“button”
将默认的
标记更改为正常的
标记。这将解决问题
下面是代码片段：

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


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