iFrame是将内容从一个域加载到另一个域的一种便捷方法，但是它们确实有其局限性。例如，通常无法为iFrame的内容设置样式，因此您只能由第三方站点摆布。如果第三方站点由于某种原因瘫痪，它们看起来也很笨拙。在页面上显示大的“找不到页面”语句非常难看。
jQuery中有一个函数，该函数load()将使用AJAX请求将页面中的内容加载到另一个页面上，甚至可以提取页面的特定区域并仅返回那些部分。我以为我会讲一些示例，然后说明如何在页面上显示另一个域的内容。可以说我们在服务器上有一个PHP文件，该文件会生成一个随机数，这将是以下非常简单的代码。
<?php echo rand();
可以使用jQuery中的单个调用将其加载到HTML页面上的div中，该调用利用了该load()函数。这只会从random_number.php文件中获取文本（其内容在上面的示例中），并将结果放入带有id为test的div中。这是执行此操作的HTML页面。请注意，如果要运行此程序，则需要将其放置在服务器上以启用AJAX调用，否则它将不会执行任何操作。
<!DOCTYPE HTML>
<html>
<head>
<title>Loader</title>
<script type="text/javascript" xx_src="https://cdn.staticfile.org/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#test').load('/random_number.php', '', function(response, status, xhr) {
if (status == 'error') {
var msg = "Sorry but there was an error: ";
$(".content").html(msg +xhr.status+ " " + xhr.statusText);
}
});
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
更进一步，可以通过向load()函数传递额外的一部分文本来获取页面上的部分文本。函数的第一个参数是资源的位置，但是也可以在资源中添加CSS标识符，该标识符将仅带回您要查找的块。以下面的HTML小片段为例，该片段将被加载到服务器上名为html_snippet.html的文件中。
<div>Some <strong>content</strong></div>
可以通过添加一个空格来获取“ strong”元素的内容，然后提取所需的CSS选择器，本例中为“ .aclass”。这意味着我们只需要稍微改变一下jQuery示例就可以使它正常工作。
$('#test').load('/html_snippet.html .aclass', '', function(response, status, xhr) {
将iFrame与AJAX调用分开的原因是，iFrame可以指向任何地方，而AJAX调用必须与原始文件位于同一域中。这是JavaScript的内置安全功能，无法规避。这意味着我们需要添加一种快速的解决方法来绕过此安全机制。以现实世界为例，我认为尝试下载一些Google搜索结果并将其打印到页面上可能是一个好主意。首先，我们需要创建PHP代码来下载Google搜索结果，这实际上非常容易。在这里，我们正在搜索术语“摆动”。
<?php
$url = 'http://www.google.com/search?hl=en&q=';
$output = file_get_contents($url . urlencode('wibble'));
echo $output;
将该文件命名为类似文件，searchgoogle.php然后将其弹出到您的服务器上。现在，我们需要更新jQuery，以便仅显示搜索结果，而不显示不需要的所有其他内容。为此，我们提供了CSS选择器“ #res”。这是您需要更改的更新的代码行。完成此操作后，页面会自动将单词“摆动”的搜索结果加载到测试div中。
$('#test').load('/searchgoogle.php #res', '', function(response, status, xhr) {
只是在将DOM加载后将结果加载到页面上并不是在每种情况下都做事的最佳方法，在更改内容以使事情变得更好时，添加“正在加载”图形和带有模糊效果的效果也很好又漂亮 所有这些都是通过页面顶部的link元素控制的。这需要添加更多的jQuery代码，因此我在添加其他操作的情况下再次将其完整打印出来。我们实质上是将click事件添加到link元素，以便它将运行该load()函数。这里还有一些其他的动作和动画功能，这些功能会导致内容在不同的时间显示和隐藏，但是基本功能仍然存在。现在，当用户单击“加载”链接时，他们将获得针对术语“摆动”的搜索结果
<!DOCTYPE HTML>
<html>
<head>
<title>Loader</title>
<style type="text/css">
div#container {
width:500px;
height:500px;
overflow:auto;
}
</style>
<script type="text/javascript" xx_src="https://cdn.staticfile.org/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
var externalpagepart = '#res';
var loadinggif = '/loading.gif';
$(document).ready(function(){
// 设置点击事件
$('a.loader').live('click', function() {
var toLoad = '/searchgoogle.php ' + externalpagepart;
$('.content').slideUp('slow', loadContent);
$('#load').remove();
$('#waiting').append('<div id="load"><img xx_src="' + loadinggif + '" alt="Loading" /></div>');
$('#load').fadeIn('normal');
function loadContent() {
$('.content').load(toLoad, '', function(response, status, xhr) {
if (status == 'error') {
var msg = "Sorry but there was an error: ";
$(".content").html(msg +xhr.status+ " " + xhr.statusText);
}
}).slideDown('slow', hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
</script>
</head>
<body>
<p><a href="javascript: null(0);">Load</a></p>
<div id="container">
<p id="waiting"></p>
<div></div>
</div>
</body>
</html>
最后，我认为将输入框集成到页面中是个好主意，以便用户可以控制要发送给Google的搜索字词。首先要做的是允许将名为“字符串”的帖子变量传递到Google搜索URL。它包装在一个调用中，urlencode()以阻止用户键入空格和其他内容时发生的任何错误。我们将在下一个片段中介绍如何发送此数据。
<?php
$url = 'http://www.google.com/search?hl=en&q=';
$postVariable = 'string';
if (isset($_POST['string'])) {
$output = file_get_contents($url . urlencode($_POST[$postVariable]));
$output = preg_replace('#<script.*</script>#ismU', '', $output);
$output = preg_replace('#<style.*</style>#ismU', '', $output);
echo $output;
}
为了通过AJAX调用传递值，我们需要在load()函数中使用第二个参数。这是我们可能要使用的JSON编码变量集合。JSON对象的属性是PHP端$_POST数组中的键。要将值“ wibble”发送到先前的PHP代码段，我们使用以下代码：
$('.content').load(toLoad, {'string': 'wibble'}, function(response, status, xhr) {
现在，我们可以将所有这些结合在一起，并创建一个表单，该表单将允许用户搜索Google而不实际离开当前页面。要使用此功能，只需在输入框中输入一个值，然后单击链接。这将触发动作并运行该load()方法。这可能可以适当地绑定到一个表格中，但这足以演示事情的工作方式。
<!DOCTYPE HTML>
<html>
<head>
<title>Loader</title>
<style type="text/css">
div#container {
width:500px;
height:500px;
overflow:auto;
}
</style>
<script type="text/javascript" xx_src="https://cdn.staticfile.org/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
var externalpagepart = '#res';
var loadinggif = '/loading.gif';
$(document).ready(function(){
// 设置点击事件
$('a.loader').live('click', function() {
var toLoad = '/searchgoogle.php ' + externalpagepart;
$('.content').slideUp('slow', loadContent);
$('#load').remove();
$('#waiting').append('<div id="load"><img xx_src="' + loadinggif + '" alt="Loading" /></div>');
$('#load').fadeIn('normal');
function loadContent() {
var searchterm = $('#searchterm').val();
$('.content').load(toLoad, {'string': searchterm}, function(response, status, xhr) {
if (status == 'error') {
var msg = "Sorry but there was an error: ";
$(".content").html(msg +xhr.status+ " " + xhr.statusText);
}
}).slideDown('slow', hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
</script>
</head>
<body>
<input type="text" name="searchterm" id="searchterm" value="wibble" />
<p><a href="javascript: null(0);">Load</a></p>
<div id="container">
<p id="waiting"></p>
<div></div>
</div>
</body>
</html>
最后一件可能是个好主意的事情是删除页面内容中的所有样式和脚本标签，这可以通过两次调用来完成preg_replace()。无论如何，这可能是一种审慎的做法，因为您最终可能会在网站上看到不需要的CSS和潜在危险的JavaScript。
$url = 'http://www.google.com/search?hl=en&q=';
$postVariable = 'string';
if (isset($_POST['string'])) {
$output = file_get_contents($url . urlencode($_POST[$postVariable]));
$output = preg_replace('#<script.*</script>#ismU', '', $output);
$output = preg_replace('#<style.*</style>#ismU', '', $output);
echo $output;
}
这非常容易设置，并且显示了简单load()调用可以具有的功能，尤其是在CMS应用程序中。可以在您自己的网站上随意使用这些示例，但请给我发消息让我知道，因为我很想看到其他人对这种方法的实现。
扫一扫
2824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
