如何在 html 页面中显示、从 API 获取数据？答案

【问题标题】：How to display, fetched data from API, in the html page?如何在 html 页面中显示、从 API 获取数据？
【发布时间】：2010-08-19 05:26:09
【问题描述】：

我有一个 html 页面。在这里，我使用的是 Yahoo API 的 tabview。那就是：

<div id="demo" class="yui-navset">
    <ul class="yui-nav">
        <li class="selected"><a href="#tab1" onclick="TopStories()"><em>Top Stories</em></a></li>
        <li><a href="#tab2" onclick="FinanceNews()"><em>Finance</em></a></li>
        <li><a href="#tab3" onclick="SportsNews()"><em>Sports</em></a></li>
    </ul>            
    <div class="yui-content">
        <div><p>Top Stories</p></div>
        <div><p>Finance</p></div>
        <div><p>Sports</p></div>
    </div>
</div>

onClickEvent中用到的函数，从Google NEWS获取数据>

function TopStories(){
location.href="http://www.google.com/news/search?aq=f&pz=1&cf=all&ned=in&hl=en&q=TopStories";
}
function FinanceNews(){
location.href="http://www.google.com/news/search?aq=f&pz=1&cf=all&ned=in&hl=en&q=Finance";
}
function SportsNews(){
location.href="http://www.google.com/news/search?aq=f&pz=1&cf=all&ned=in&hl=en&q=Sports";
}

但输出是导航到新闻页面。但是，我想将它们显示为选项卡内容。

我该怎么办？

【问题讨论】：

标签： javascript html api uitabview

【解决方案1】：

您可以为此目的使用 iframe .. 参见下面的示例，，

使用 Jquery 选项卡，它总是创建一个 div 来显示您的结果。您只能使用 . 来打开页面上的外部链接。

<li><a href=ReturnIfram()><span>Google</span></a></li>

href 得到一个包含类似 ifram 的字符串

public string ReturnIfram()
{
   return "<iframe src="http://google.fr"></iframe>"
}

在javascript中尝试上面的例子，见下面的例子

<html>
<head>
<script language="JavaScript" type="text/javascript">
function makeFrame() {
   ifrm = document.createElement("IFRAME");
   ifrm.setAttribute("src", "http://developerfusion.com/");
   ifrm.style.width = 640+"px";
   ifrm.style.height = 480+"px";
   document.body.appendChild(ifrm);
}
</script>
</head>
<body>
<p><a href="#" onMouseDown="makeFrame()">GO! </a></p>
</body>
</html>

【讨论】：

这里只允许使用 HTML 和 JavaScript。
见上面的例子用javascript做...根据你的要求改变上面。