上单击显示的iframe单击、iframe

2023-09-10 14:08:09 作者:處籹ぺ嬁伱破

我有,你可以点击位置的地图,以便得到有关这方面的,我想显示在同一页面中的iframe的信息被点击时

I have a map that you can click on locations to get information for that area and I would like to show that information in a Iframe on the same page when clicked

我的页面现在有本作的链接

My page has this for the link now

`<AREA SHAPE="CIRCLE" COORDS="555,142,6" HREF="http://www.Page.com" TITLE="" />`

任何建议

推荐答案

AJAX的好处是,你并不真的需要一个 IFRAME 做到这一点。

The beauty of AJAX is that you don't really need an IFRAME to do this.

您已经有了将返回给大家介绍一个特定区域信息的服务器。每个区域标签只需要一个的onclick 属性,调用一个JavaScript函数来检索信息,并以显示它您的位置预留您的网页上。

You've got a server that will return to you information about a certain area. Each of the AREA tags simply needs an onclick attribute that calls a JavaScript function to retrieve that information and display it in a location you set aside on your page.

下面是一个简单的HTML页面,将检索使用AJAX服务器的信息

Here is a sample HTML page that will retrieve information from the server using AJAX

<html>
<head>
<script type="text/javascript">
function getAreaInfo(id)
{
  var infoBox = document.getElementById("infoBox");
  if (infoBox == null) return true;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState != 4) return;
    if (xhr.status != 200) alert(xhr.status);
    infoBox.innerHTML = xhr.responseText;
  };
  xhr.open("GET", "info.php?id=" + id, true);
  xhr.send(null);
  return false;
}
</script>
<style type="text/css">
#infoBox {
  border:1px solid #777;
  height: 400px;
  width: 400px;
}
</style>
</head>
<body onload="">
<p>AJAX Test</p>
<p>Click a link...
<a href="info.php?id=1" onclick="return getAreaInfo(1);">Area One</a>
<a href="info.php?id=2" onclick="return getAreaInfo(2);">Area Two</a>
<a href="info.php?id=3" onclick="return getAreaInfo(3);">Area Three</a>
</p>
<p>Here is where the information will go.</p>
<div id="infoBox">&nbsp;</div>
</body>
</html>

这里是返回该信息到HTML页面的info.php的:

And here is the info.php that returns the information back to the HTML page:

<?php
$id = $_GET["id"];
echo "You asked for information about area #{$id}. A real application would look something up in a database and format that information using XML or JSON.";
?>

希望这有助于!

Hope this helps!