在弹出窗口中显示负载信息

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