如何使用用AJAX请求填充的javascript调用弹出窗口

how to invoke an pop up window using javascript that gets populated with an AJAX request

本文关键字：调用 javascript 窗口 填充 何使用 AJAX 请求      更新时间：2023-09-26

我在java类中使用以下代码来添加到表网格的链接。下面的代码是特定于公司内部API的。

  /***MyLink.java*********/
  myLink.setOnClick( "getURL", return false;);
  addToolBarItem("myLink");
  /***MyLinkJSFPage.jsf****
  urlValue= "www.google.com";

在jsf页面中，我必须向getURL javascript发出ajax请求，这将打开一个弹出窗口，其中包含来自jsf页面的url。基本上，当用户单击链接时，应该用ajax请求填充一个javascript弹出窗口。我们该怎么做呢?

我发现比起弹出窗口，我更喜欢使用元素来达到同样的效果，因为现在大多数浏览器都有弹出窗口拦截器。使用div "popup"，没有任何东西会阻止它。

首先，需要在HTML代码中添加div。任何地方都可以。这是将显示您的内容的区域。它必须有一个id标签(在本例中为"popup")

<div id='popup' style='visibility: hidden; position: absolute; width: 500px; height: 300px;'></div>

接下来，您需要javascript代码来请求页面并从服务器接收响应。这是我的标准函数:

function get_(url, func)
{
 var http;
 try { http = new XMLHttpRequest(); } catch (e) { try { http = new ActiveXObject('"Msxml2.XMLHTTP'"); } catch (e) { try { http = new ActiveXObject('"Microsoft.XMLHTTP'"); } catch (e) { alert('"Failed to load!'"); return false; } } }
 http.open('"GET'", url, true);
 http.onreadystatechange = function() { if(http.readyState == 4) { func(http); } }
 http.send(null);
}

对于这个例子，我将有一个按钮，使弹出功能，这样你就可以看到如何使用代码。以下是所有内容:

<html>
<head>
<script language='javascript'><!--
function get_(url, func)
{
 var http;
 try { http = new XMLHttpRequest(); } catch (e) { try { http = new ActiveXObject('"Msxml2.XMLHTTP'"); } catch (e) { try { http = new ActiveXObject('"Microsoft.XMLHTTP'"); } catch (e) { alert('"Your browser broke!'"); return false; } } }
 http.open('"GET'", url, true);
 http.onreadystatechange = function() { if(http.readyState == 4) { func(http); } }
 http.send(null);
}
function getPopup()
{
 get_("url_of_popup_source.html", showPopup);
}
function showPopup(h)
{
 var p = document.getElementById("popop");
 p.innerHTML = h.responseText;
 p.style.visibility = "visible";
}
function hidePopup()
{
 p.style.visibility = "hidden";
}
--></script>
</head>
<body>
<button onClick='showPopup();'>Click here</button>
<div id='popup' style='visibility: hidden; position: absolute; width: 500px; height: 300px; top:100px; left:200px;'></div>
</body>
</html>

这显然是非常基本的。你也可以调整弹出框的大小和绝对位置。但主要的想法是，你不再使用一个实际的弹出窗口来获取信息给用户，因为它可能会被封锁。

我包含的额外功能"hidePopup"将关闭弹出窗口。我建议你在你的"url_of_popup_source.html"中包含一个按钮，当点击时执行hidePopup。这样，用户可以阅读信息，然后关闭弹出框，就好像它是一个对话框。

相关文章：