Displaying load message in popup window

Question

I am redirecting my customer to new site using window.open(). I wanted to display some message or image before that site is loaded.

Here is my code.

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

JavaScript code :

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

Here {{ product.metafields.google.custom_label_0 }} is a dynamic URL. The test alert message is displaying in same page.

any help ?

Answer 1

Let's add a variable:

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

EDIT

If you do not want alert, just write message then try this:

newWin.document.write('Message');

newWin is a window object, so you can use it as is.

You can found more details here: Add content to a new open window

Answer 2

The function two() you are calling is being executed from your page1(suppose) and you are opening page2(suppose) in new window. Your function is called by page1 so the alert will be shown in the same page. So either you should have a reference to the new window opened and then trigger an alert like

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

But this is not a good solution because javascript alert is a blocking function your JavaScript stops executing until they return so if there is some part of page that is dependent on javascript wont be loaded unless you close the popup. What i would suggest is: there are lot of CSS loaders available on the net you just need to google out a bit. Use that in your page which will be shown to the user until all the data is populated or the page has finished loading. Something like have a modal div and make it visible and once the page finishes loading hide that div. Here is a demo for you which you can use as reference.

$(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 {
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 z-index: 10;
}

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