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

【问题标题】：how to invoke an pop up window using javascript that gets populated with an AJAX request如何使用填充有 AJAX 请求的 javascript 调用弹出窗口
【发布时间】：2013-04-09 18:07:07
【问题描述】：

我在 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 弹出窗口。我们该怎么做呢？任何帮助表示赞赏。

【问题讨论】：

标签： javascript ajax jsf popupwindow

【解决方案1】：

我发现比起弹出窗口，我更喜欢使用元素来达到同样的效果，因为现在大多数浏览器都有弹出窗口拦截器。使用 div“弹出窗口”，没有什么可以阻止它。

首先，您需要在 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。这样，用户可以阅读信息，然后像关闭对话框一样关闭弹出窗口。

【讨论】：