javascript - 如何在子視窗開啟時停止刷新父頁面？

當我點擊連結打開子視窗時，父頁面會自動刷新。我該如何阻止它？

當子視窗打開時，父頁面不應該刷新。應該怎麼做？請幫幫我。

我的程式碼如下所示：

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

答案＃1

你的頁面會重新整理，因為不僅你的函數被調用，a 標籤所指示的超連結也被執行。因此，你同時發生兩件事：

超連結本身會導向 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

這是 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 屬性值的導向從未被執行。第一行處理瀏覽器特性，因為較舊的 IE 瀏覽器不會將事件對象作為參數傳遞給事件處理程序，而是暴露一個全局 event 對象。

如果你不需要支援 IE9 之前的瀏覽器，你可以透過使用 addEventListener('click', myfunction); 取代上面的 onclick=myfunction; 來進一步改善。這有許多優點：可以為同一個事件附加更多的事件處理程序，並且你也可以逐一移除它們。jQuery 提供了透過 .on() 實現良好的跨瀏覽器支援。

上述解決方案有幾種變化，每種都有其優點和缺點。你甚至可以不使用錨點來達到這個目的，而是使用另一個元素並為其添加樣式。

答案＃2

在 window.open() JS 方法之後寫上 return false();。

如果上述程式碼片段無法運作，請將預設的 <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>