3

<div>我有一个带有多个标签的主页。其中一个<div id="top_bar">包含一个链接。如果我单击该链接，则应在主页中的另一个页面上加载一个新网页<div id="content">。我怎么做？

此外，如果另一个新加载的页面<div id="content">包含一个链接，并且单击该链接有助于在标签中加载第二个新网页，<div id ="content">替换 div 的第一个内容，问题是我该怎么做？

这是给我的任务，规则是：

  1. 我只需要使用 Javascript、CSS 和 HTML。
  2. 我不能使用<iframe>标签。
  3. 我也不能使用<table>标签在行/列中加载页面。

我需要有关如何做到这一点的帮助和建议。

主页.html

  <body>
  <div id="topBar">
     <a href ="#" onclick="load_home()"> HOME </a>
     <a href="#"  onclick="load_about()"  > ABOUT </a> 
     <a href="#"  onclick="load_search()"> SONG LIST </a> 
  </div>
  <div id ="content"> </div>
  </body>

我希望 music.html 在 < div id="content" > 旁边打开，一切就绪。但在music.html 中有一个按钮。我想通过单击该按钮在 < div id="content" > 中打开 Songlist.html。music.html 的代码：

  <body >   
  <form name="flyrics" method="get" > 
         Lyrics: <input type ="text" name ="lyrics"/>   
         Artist Name:<input type ="text" name ="artist"  /> 
         <input type="submit" id="x" value="Search" /> 
  </form>
  </body>

javascript:

function load_home(){ document.getElementById("content").innerHTML='<object type="type/html" data="home.html"  id="link_pages" ></object>'; }
function load_about(){ document.getElementById("content").innerHTML='<object type="type/html" data="about.html"  id="link_pages" ></object>'; }
function load_search(){ document.getElementById("content").innerHTML='<object type="type/html" data="music.html"  id="link_pages" ></object>'; }
function validation(){
    var x=document.forms["flyrics"]["lyrics"].value;
    if (x==null || x=="")
    {
        alert("Search without Lyrics?");
        return false;
    }

    var y=document.forms["flyrics"]["artist"] value;
    if (y==null || y=="")
    {
        alert("Search without Artist Name?");
        return false;
    }
    window.open("songList.html", "currentWindow");

}
4

5 回答 5

4

AJAX 是您的任务正在寻找的。

简单示例

HTML：

<button id="nav">load</button>
<div id="page"></div>

JS：

document.getElementById('nav').onclick = function(){
var xhr = new XMLHttpRequest();

    xhr.onreadystatechange=function()
  {
  if (xhr.readyState==4)
    {
        document.getElementById("page").innerHTML = xhr.response;

    }
  }
xhr.open("GET", "http://www.codecademy.com/", false);

xhr.send(); 
}

小提琴：http: //jsfiddle.net/DZmBG/3/

于 2013-07-03T19:43:52.353 回答
3

在您的一条评论中，您提到使用<object>标签嵌入外部 HTML 文件。

这是使用该方法的示例：

HTML：

<div id="links">
  <a href="http://stuff.com" onclick="return go(this);">stuff</a>
  <a href="http://www.fun.com" onclick="return go(this);">fun</a>
  <a href="http://bing.com" onclick="return go(this);">bing</a>
</div>

<div id="container"></div>

CSS：

div#container {
    width:500px;
    height:500px;
    overflow:hidden;
}

JS：

function go(obj) {
    var page=obj.href;
    document.getElementById('container').innerHTML='<object data="'+page+
      '" type="text/html"><embed src="'+page+'" type="text/html" /></object>';
    return false;
}

http://jsfiddle.net/sAcCV/

编辑：

话虽如此，我建议使用 AJAX 加载外部内容，而不是： http ://www.javascriptkit.com/dhtmltutors/ajaxincludes.shtml

请参阅Relfor 的回答。

于 2013-07-03T20:44:16.833 回答
0

iframe 是显而易见的答案。这就是它的目的。但是由于您的要求表明您不能使用它....

任何不在您的域内的网站都将违反同源策略，并且远程页面中的 Javascript 不会像您可能认为的那样在您网站的 div 中运行。您可能必须检查 CURL 获取方法或类似的方法才能使用直接 div 和 javascript 进行操作。

于 2013-07-03T19:45:27.053 回答
0

如果您无法使用 iframe，AJAX 绝对是您的最佳选择。我建议在这个例子中使用 jQuery 来节省一些时间。他们的 AJAX 处理非常简单，您将希望使用他们的 .live() 或 .on() 事件处理程序来跟踪容器内的点击事件。

此外，如果您在不同的域上加载站点，您可能会遇到问题。AJAX 调用通常用于同域响应。您可以使用 JSONP 解决此问题。但是，您的 Web 服务必须支持方法注入才能正常工作。如果不是，您可能想看看您是否可以与您的主机/网站管理员一起解决 iframe 障碍。

于 2013-07-03T19:52:04.280 回答
-3

你不能。你在要求一些无法完成的事情。对于这种情况，您必须使用 iframe。

于 2013-07-03T19:51:10.073 回答