在彈出窗口中顯示負載信息

Question

我正在使用window.open()將我的客戶重定向到新網站。我想在該網站加載之前顯示一些消息或圖像。

這是我的代碼。

<input class="btn add-to-cart-btn" onclick="two();" 
      type="button" value="More Info At {{ product.vendor }}"/> 

JavaScript代碼：

<script> 

    function two() 
    { 

     window.open('{{ product.metafields.google.custom_label_0 }}'); trackOutboundLink('{{ product.metafields.google.custom_label_0 }}'); } 

    alert("please wait your page is loading "); 

     var trackOutboundLink = function(url) { ga('send', 'event', 'outgoing', 'click', url, { 'transport': 'beacon' }); 

} 

</script> 

這裏{{ product.metafields.google.custom_label_0 }}是一個動態的URL。測試警報消息顯示在同一頁面中。

有幫助嗎？

Answer 1

讓我們添加一個變量：

var newWin = window.open('{{ product.metafields.google.custom_label_0 }}'); 
newWin.alert('Message'); 

編輯

如果你不希望接收警報，只寫消息，那麼試試這個：

newWin.document.write('Message'); 

newWin是window對象，所以你可以按原樣使用它。

你可以在這裏找到更多的細節：Add content to a new open window

Answer 2

two()您呼叫正從您的第1頁（假設）執行，您在新窗口中打開第二頁（假設）的功能。您的功能由page1調用，因此警報將顯示在同一頁面中。因此，無論你應該有打開新窗口的引用，然後觸發像

var NewWindow = window.open('{{ product.metafields.google.custom_label_0 }}'); 
NewWindow .alert('please wait your page is loading'); 

警報但是，這不是一個很好的解決方案，因爲JavaScript警告是你的JavaScript停止執行阻塞函數，直到他們回到所以如果有除非關閉彈出窗口，否則依賴於JavaScript的頁面的某些部分將不會被加載。 我會建議的是：網上有很多CSS加載器可用，您只需要在Google上進行一下。在你的頁面中使用它，這將顯示給用戶，直到所有的數據填充或頁面完成加載。就像有一個模式的div，並使其可見，一旦頁面完成加載隱藏該div。以下是您可以用作參考的演示。

$(document).ready(function(){ 
 
    setTimeout(function(){ 
 
    $("#one").html("finished loading"); 
 
    $("#cssload-contain").hide(); 
 
    },2000) 
 
});

#allthethings { 
 
    width: 20% ; 
 
    height: 30%; 
 
    left: 45%; 
 
    top:35%; 
 
    position:fixed; 
 
    -webkit-transform: scale(2); 
 
} 
 

 
#cssload-contain { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color:rgba(248, 248, 248, 0.50); 
 
    z-index: 1000; 
 
} 
 

 

 

 
.cssload-preloader { 
 
\t position: absolute; 
 
\t top: 0px; 
 
\t left: 0px; 
 
\t right: 0px; 
 
\t bottom: 0px; 
 
\t z-index: 10; 
 
} 
 

 
.cssload-preloader > .cssload-preloader-box { 
 
\t position: absolute; 
 
\t height: 29px; 
 
\t top: 50%; 
 
    width:500px; 
 
\t margin: -15px 0 0 -146px; 
 
\t perspective: 195px; 
 
\t \t -o-perspective: 195px; 
 
\t \t -ms-perspective: 195px; 
 
\t \t -webkit-perspective: 195px; 
 
\t \t -moz-perspective: 195px; 
 
} 
 
.cssload-preloader .cssload-preloader-box > div { 
 
\t position: relative; 
 
\t width: 29px; 
 
\t height: 29px; 
 
\t background: rgb(204,204,204); 
 
\t float: left; 
 
\t text-align: center; 
 
\t line-height: 29px; 
 
\t font-family: Verdana; 
 
\t font-size: 19px; 
 
\t color: rgb(255,255,255); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="cssload-contain"> 
 
     <div id="allthethings"> 
 
      <div class="cssload-preloader"> 
 
       <div class="cssload-preloader-box"> 
 
        <div>L</div> 
 
        <div>o</div> 
 
        <div>a</div> 
 
        <div>d</div> 
 
        <div>i</div> 
 
        <div>n</div> 
 
        <div>g</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    
 
    <label id="one"></label>

Fiddle