如何在子窗口打开时停止刷新父页面？
[英]how to stop refreshing parent page while child window open?
问题描述
when i click link to open child window, parent page refresh automatically. 
当我点击链接打开子窗口时，父页面会自动刷新。 how can i stop it? 我怎么能阻止它？
parent page should not refresh while open child window. 打开子窗口时不应刷新父页面。 how to do this? 这个怎么做？ please help me. 请帮我。
my code is as below given: 我的代码如下：
<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 个解决方案
解决方案1
5 2015-11-01 08:37:57
Your page refreshes because not only is your function called, but also the hyperlink indicated by the a tag is executed. 您的页面刷新，因为不仅调用了您的函数，还执行了由a标记指示的超链接。 So you have two things happening at the same time: 所以你有两件事同时发生：
- the hyperlink itself navigates to whatever is in the
hrefattribute, even if it is empty.超链接本身导航到href属性中的任何内容，即使它是空的。 Ifhrefis empty it means: reload this page.如果href为空，则表示：重新加载此页面。 - the
onclickevent handler also does something (opening a popup), but it does currently not cancel the first effect.onclick事件处理程序也可以执行某些操作（打开弹出窗口），但它当前不会取消第一个效果。
In a first reaction one might just remove the offending href attribute. 在第一个反应中，可能只是删除有问题的href属性。 This solves the problem, but introduces another: you lose all the nice styling on the displayed hyperlink text (like underline, color, changing cursor, tab order, ...), which is generally not what you want. 这解决了这个问题，但又引入了另一个问题：你在显示的超链接文本上丢失了所有漂亮的样式（如下划线，颜色，更改光标，Tab键顺序......），这通常不是你想要的。
Here are some more convenient solutions: 以下是一些更方便的解决方案：
Let the onclick event handler return false 让onclick事件处理程序返回false
Returning false will cancel the anchor's default behaviour and the content of the href attribute will be ignored: 返回false将取消锚点的默认行为，并且将忽略href属性的内容：
onclick="ShowPopup('popup_login.asp'); return false;"
If you care about browsers that have no javascript support (or have it disabled), then put a meaningful fall-back url in the href attribute, like: 如果你关心没有javascript支持的浏览器（或禁用它），那么在href属性中添加一个有意义的回退url ，例如：
href="javascript_is_required.html"
Use event.preventDefault 使用event.preventDefault
This is an alternative to return false . 这是return false的替代方法。 It has the advantage that you can make it execute as the first instruction, so that if a run-time error occurs in the other code it will already have done it's job: 它的优点是你可以将它作为第一条指令执行，这样如果在其他代码中发生运行时错误，它就已经完成了它的工作：
onclick="event.preventDefault();ShowPopup('popup_login.asp');"
Note that this event object is defined by all browsers in the context of event attributes, and is to be distinguished from the window.event object, which is not supported by all browsers. 请注意，此event对象由事件属性上下文中的所有浏览器定义，并且要与window.event对象区分开，而不是所有浏览器都支持该对象。
Use hash notation in href 在href使用哈希表示法
Give the anchor a name and then reference that name in the href attribute. 为锚点命名，然后在href属性中引用该名称。 This way the anchor will navigate itself into view, which it usually already is when the user clicked it: 通过这种方式，锚点将自己导航到视图中，当用户点击它时通常已经是这样：
name="loginlink" href="#loginlink"
You will often see the shorter variation href="#" , but this will scroll the page to the top when clicked, which might be OK if you know for sure the page is not scrolled down. 您经常会看到较短的变化href="#" ，但这会在单击时将页面滚动到顶部，如果您确定页面未向下滚动，则可能没问题。 Still, the use of "#" has a side-effect: when clicked the url changes and the previous url is put on the browser's history stack. 尽管如此，使用“＃”会产生副作用：点击时， url发生变化，之前的url被放在浏览器的历史记录堆栈中。 So if after clicking the link you press the back button, you stay on the page. 因此，如果点击链接后按后退按钮，则会保留在页面上。 This may be undesired. 这可能是不希望的。
Use the javascript: protocol to do nothing 使用javascript:协议什么都不做
href="javascript:"
This will make the hyperlink execute any javascript following the colon, and since there is none there, nothing will happen. 这将使超链接执行冒号后的任何javascript，并且因为没有，所以不会发生任何事情。 The browser history is not modified. 浏览器历史记录未被修改。 There are variations to this method, like javascript: return false; 这种方法有变化，比如javascript: return false; or javascript: void(0); 或javascript: void(0);
Use the javascript: protocol to handle the click event 使用javascript:协议来处理click事件
With this solution you no longer use the onclick attribute. 使用此解决方案，您不再使用onclick属性。 Instead you move the code to the href attribute: 而是将代码移动到href属性：
href="javascript: ShowPopup('popup_login.asp');"
Separation of lay-out and code 布局和代码分离
The original code and all the above solutions still have an issue that many developers do not like: HTML is mixed with javascript code. 原始代码和所有上述解决方案仍然存在许多开发人员不喜欢的问题： HTML与javascript代码混合在一起。 It is better to separate these two. 最好将这两者分开。
This can be done as follows: 这可以按如下方式完成：
<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>
A few will say this also has a down-side: it is harder to identify the code that executes on a click. 一些人会说这也有一个缺点：识别点击执行的代码更难。 The above code will attach the event handler to the click event of the mylink element. 上面的代码将事件处理程序附加到mylink元素的click事件。 Make sure to have it execute only after the document has loaded. 确保在文档加载后才执行它。 The event handler cancels the default click behaviour in two ways. 事件处理程序以两种方式取消默认单击行为。 Choose the one you prefer, or both if you want. 根据需要选择一个或两个。 As it is cancelled, the navigation to the href attribute value is never executed. 在取消时，永远不会执行到href属性值的导航。 The first line deals with browser specifics as older IE browsers do not pass the event object as an argument to the event handler, but expose a global event object instead. 第一行处理浏览器细节，因为较旧的IE浏览器不会将事件对象作为参数传递给事件处理程序，而是公开全局event对象。
If you don't have to support pre-IE9 browsers, you can improve more by using addEventListener('click', myfunction); 如果您不必支持IE9之前的浏览器，可以使用addEventListener('click', myfunction);来提高addEventListener('click', myfunction); instead of onclick = myfunction; 而不是onclick = myfunction; in the above code. 在上面的代码中。 This has many advantages: more event handlers can be attached to the same event, and you can also remove them one by one. 这有许多优点：可以将更多事件处理程序附加到同一事件，您也可以逐个删除它们。 jQuery offers good cross browser support for this with .on() . jQuery通过.on（）为此提供了良好的跨浏览器支持。
There are several variations on the above solutions, all with their benefits and downsides. 上述解决方案有几种变体，都有其优点和缺点。 You could even step away from using an anchor for this purpose and use another element instead with styling added to it. 您甚至可以为此目的而不使用锚点，而是使用另一个元素而不是添加样式。
解决方案2
4 2017-01-20 11:23:54
Write return false(); 写返回false(); after the window.open() JS method. 在window.open() JS方法之后。
In case the above snippet is not working, change the default <button> tag to normal <input> tag with type="button" . 如果上述代码段不起作用，请使用type="button"将默认的<button>标记更改为普通的<input>标记。 This will solve the problem. 这将解决问题。
Below is the code snippet: 以下是代码段：
JavaScript JavaScript的
<script>
function tagedlist() {
window.open("http://w3schools.com","mywindow","menubar=1,resizable=1,width=1000,height=1000");
return false;
}
</script>
解决方案3
0 2018-07-10 23:47:44
Just adding type="button" in <button> tag worked. 只需在<button>标签中添加type="button" <button> 。 I know it's redundant but it worked! 我知道这是多余的，但它有效！
From this: 由此：
<button id="btnDeleteRequest" class="btn btn-default" accesskey="D" onclick="ExecuteCommand('DeleteRequest',this);">
To this: 对此：
<button id="btnDeleteRequest" class="btn btn-default" type="button" accesskey="D" onclick="ExecuteCommand('DeleteRequest',this);">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.