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 }}是动态网址。测试警报消息显示在同一页面中。

任何帮助？

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()正在从您的page1（假设）执行，并且您在新窗口中打开page2（假设）。您的功能由page1调用，因此警报将显示在同一页面中。因此，您应该引用打开的新窗口，然后触发类似

的警报

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

但这不是一个好的解决方案，因为javascript警报是一个阻止函数，你的JavaScript会停止执行，直到它们返回，所以如果有一部分页面依赖于javascript，除非你关闭弹出窗口，否则不会被加载。我建议的是：网上有很多CSS加载器你需要稍微谷歌一点。在您的页面中使用它，这将显示给用户，直到填充所有数据或页面加载完毕。像是有一个模态div并使其可见，一旦页面完成加载隐藏该div。这是一个可以作为参考的演示。

＆＃13;

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

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

Fiddle

在弹出窗口中显示加载消息

2 个答案: