使用网址从另一个页面的div内加载内容
[英]Load content inside div from another page with a url
问题描述
I currently have Jquery tabs for different content on a page but this does not help me SEO wise as google and other places will not pick up this content. 
我目前在页面上具有用于不同内容的Jquery选项卡，但这对SEO并没有帮助，因为google和其他地方不会选择此内容。
I am looking for "tabs" but instead when you click on a link it loads that bit of information. 我正在寻找“标签”，但是当您单击链接时，它会加载该信息。
An example of this would be here http://www.gamespot.com/watch-dogs 例如： http：//www.gamespot.com/watch-dogs
You click on a "tab" say reviews and it loads that content along with a url of http://www.gamespot.com/watch-dogs/reviews/ 您单击“选项卡”上的评论，它将加载该内容以及http://www.gamespot.com/watch-dogs/reviews/
I am looking to replicate something like this rather than using Jquery tabs. 我正在寻找复制这样的东西，而不是使用Jquery选项卡。
Your help would be grand! 您的帮助将是巨大的！
4 个解决方案
解决方案1
1 2014-07-02 20:31:21
If you want the content to be picked up by search engines, it has to be in the original HTML. 如果您希望搜索引擎提取内容，则必须使用原始HTML。 They won't run scripts that update the DOM on the client. 他们不会运行用于更新客户端上DOM的脚本。 So you need to do it in PHP: 因此，您需要在PHP中执行此操作：
<div>
<?php readfile("url"); ?>
</div>
However, if the URL is for a full web page, this is probably a bad idea. 但是，如果URL用于完整的网页，则可能不是一个好主意。 It will have its own <html> , <head> , and <body> tags, and these should appear only once on a page, not embedded inside another page. 它将具有自己的<html> ， <head>和<body>标记，并且这些标记应仅在页面上出现一次，而不是嵌入在另一个页面中。
解决方案2
0 2014-07-02 20:28:12
Try jQuery's load function: 试试jQuery的load函数：
$( "#element to put data in" ).load( "address", function() {
alert( "Load was performed." );
//what to do when done loading page
});
解决方案3
0 已采纳 2014-07-02 20:40:41
<div id="myContent"></div>
load method: 加载方式：
$("#myContent").load("url to your content which you want to load", function(){
// things which you want to do with.
});
解决方案4
0 2014-07-02 22:09:15
In order to make both search engines (which likely won't execute JQuery) and users (who might like dynamic elements) happy, you could do two solutions. 为了使搜索引擎（可能不会执行JQuery）和用户（可能喜欢动态元素）都感到满意，您可以采取两种解决方案。 You might have a link which when clicked goes to a brand new HTML page. 您可能具有一个链接，单击该链接将转到一个全新的HTML页面。 Search engines will follow this link and see a whole separate page. 搜索引擎将点击此链接，并看到一个完整的单独页面。 Then, you might have a javascript within your page (or within the link's click event) that intercepts and overrides the original link's target and instead executes something like JQuery's $().load(). 然后，您的页面中（或链接的click事件中）可能会有一个javascript，该javascript拦截并覆盖原始链接的目标，而是执行诸如JQuery的$（）。load（）之类的东西。 To reuse content you could have the target page be capable of loading both with and without a wrapper. 要重用内容，您可以使目标页面既可以使用包装器也可以使用包装器来加载。
Target File: 目标文件：
<?php if(!isset($_GET['skipWrapper'])) { include('header.php'); } ?>
Here's the content that matters!
<?php if(!isset($_GET['skipWrapper'])) { include('footer.php'); } ?>
Source File: 源文件：
<?php if(!isset($_GET['skipWrapper'])) { include('header.php'); } ?>
Here's the orginal content!
<a href="TargeFile.php" onclick="asyncLoad('TargeFile.php'); return false;">
<?php if(!isset($_GET['skipWrapper'])) { include('footer.php'); } ?>
Definition of asyncLoad: asyncLoad的定义：
function asyncLoad(url) { $('#targetElementId').load(url + '?skipWrapper=true'); }
However, it might be best to just stick with the traditional links rather than doing async tabs. 但是，最好只坚持使用传统链接，而不要使用异步选项卡。 Users get confused when the back button doesn't work or when common behaviors (like middle click to open a link in a new browser tab) no longer work. 当后退按钮不起作用或常见行为（例如在新浏览器选项卡中单击鼠标中键以打开链接）不再起作用时，用户会感到困惑。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.