如何仅使用 javascript 和 html 在 <div> 标签中加载嵌套网页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17456740/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I load a nested web page in a <div> tag using only javascript and html?
提问by Giliweed
I have a home page with multiple <div>tags. One of the <div id="top_bar">contains a link. If I click on the link, a new web page should load on one of the other <div id="content">in home page. How do I do that?
我有一个带有多个<div>标签的主页。其中之一<div id="top_bar">包含链接。如果我点击链接，一个新的网页应该加载到<div id="content">主页的另一个页面上。我怎么做？
More over, if the newly loaded page on one of the other <div id="content">contains a link, and clicking on the link helps the 2nd new web page load in the <div id ="content">tag replacing the first content of the div , the question is how do I do that?
此外，如果另一个页面上新加载的页面<div id="content">包含一个链接，并且单击该链接有助于在<div id ="content">标签中加载第二个新网页以替换 div 的第一个内容，问题是我该怎么做？
This is an assignment given to me and the rules are:
这是给我的任务，规则是：
- I have to use Javascript, CSS and HTML only.
- I can't use
<iframe>tag. - I can't use
<table>tag either to load page in a row/column.
- 我只需要使用 Javascript、CSS 和 HTML。
- 我不能使用
<iframe>标签。 - 我也不能使用
<table>标签在行/列中加载页面。
I need help and advice about how to do it.
我需要关于如何做到这一点的帮助和建议。
home.html
主页.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>
I want the music.html to open in side the < div id="content" > which all ready does. but in music.html there is a button. I want to open Songlist.html in < div id="content" > by clicking on that button. code for music.html :
我希望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:
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");
}
采纳答案by showdev
In one of your comments, you mentioned using <object>tags to embed external HTML files.
在您的评论之一中，您提到使用<object>标签嵌入外部 HTML 文件。
Here is an example using that method:
这是使用该方法的示例：
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:
CSS：
div#container {
width:500px;
height:500px;
overflow:hidden;
}
JS:
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;
}
EDIT:
编辑：
This being said, I recommend using AJAX to load external content, instead: http://www.javascriptkit.com/dhtmltutors/ajaxincludes.shtml
话虽如此，我建议使用 AJAX 加载外部内容，而不是：http: //www.javascriptkit.com/dhtmltutors/ajaxincludes.shtml
See Relfor's answer.
请参阅Relfor 的回答。
回答by Raj Nathani
AJAX is what your assignment is looking for.
AJAX 正是您的任务所需要的。
Simple Example
简单示例
HTML:
HTML：
<button id="nav">load</button>
<div id="page"></div>
JS:
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();
}
fiddle: http://jsfiddle.net/DZmBG/3/
回答by Matthew R.
AJAX is definitely the way to go if you are not able to use iframes. I would suggest using jQuery for this example to save some time. Their AJAX handling is pretty straightforward and you are gonna want to use their .live() or .on() event handlers to track the click events inside the containers.
如果您无法使用 iframe，AJAX 绝对是您要走的路。我建议在这个例子中使用 jQuery 来节省一些时间。他们的 AJAX 处理非常简单，你会想要使用他们的 .live() 或 .on() 事件处理程序来跟踪容器内的点击事件。
Additionally, you may run into issues if you are loading sites on different domains. AJAX calls are typically meant for same-domain responses. You can get around this using JSONP. However, your web service must support method injection for this to work. In not, you may want to see if you can work around the iframe barrier with your host/webmaster.
此外，如果您在不同域上加载站点，您可能会遇到问题。AJAX 调用通常用于同域响应。您可以使用 JSONP 来解决这个问题。但是，您的 Web 服务必须支持方法注入才能使其工作。不是，您可能想看看您是否可以与您的主机/网站管理员一起解决 iframe 障碍。
回答by bpeterson76
Iframe is the obvious answer. That's what it was made for. But since your requirements state you can't use it....
iframe 是显而易见的答案。这就是它的目的。但是由于您的要求说明您不能使用它....
Any site that's not within your domain is going to violate the same origin policy, and Javascript in the remote page is not going to run as you probably would think it would inside a div on your site. You'd probably have to examine a CURL get approach or something similar to do it with a straight div and javascript.
任何不在您域内的站点都将违反同源策略，并且远程页面中的 Javascript 不会像您可能认为的那样在站点的 div 中运行。您可能必须检查 CURL get 方法或类似的方法才能使用直接的 div 和 javascript 来完成。
回答by user2544708
You can not. You are asking for something that can not be done. For such situation you must use iframe.
你不能。你在要求一些无法完成的事情。对于这种情况，您必须使用 iframe。
