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应用程序中。可以在您自己的网站上随意使用这些示例,但请给我发消息让我知道,因为我很想看到其他人对这种方法的实现。
问题内容: 有没有办法做到这一点? page1.php-有 index.php-有 我可以以某种方式从div内部的page1.php中获取数据并将其加载到index.php中的div中吗? 我已经使用css-tricks网址中提供的代码完成了此操作:http : //css- tricks.com/examples/DynamicPage/ 但这使用哈希更改事件。我不想使用哈希功能,而只想使用加载
问题内容: 如果不使用iframe,则可以加载以下内容: 与外部站点,例如somesitehere.com 页面何时加载?-我知道如何从文件加载内容,但是不确定如何加载整个网站吗? 非常感谢, 问题答案: 无需专门的操作就可以做到。由于标题中提到了jQuery,因此使用了jQuery。
我试图从另一个页面加载内容,但当我单击“获取内容”按钮时显示错误,这里的脚本>> 显示的错误是:
问题内容: 我的问题: 我有index.html: 是这样的: 问题很简单。 当我按下按钮时,我想动态加载内容,而无需刷新。 提前致谢!请发表评论以进行任何必要的澄清。 编辑,更详细的解释: 我不确定自己是否很清楚(或者我可能不了解我缺乏技术技能的答案),所以我再说一遍。(改写) 我有一个带有提交按钮的HTML,该按钮通过POST方法发送变量。 PHP文件使用此变量,并在经过一定过程后插入并更新M
问题内容: 我试图做到这一点,所以当我单击HTML页面中的链接时,它会动态地将请求的页面加载到jQuery的div中。 我怎样才能做到这一点? 问题答案: 那里有一个叫做pjax的jQuery插件,它指出:“它是带有真正的永久链接,页面标题和完全退化的后退按钮的ajax。” 该插件使用HTML5 pushState和AJAX来动态更改页面,而无需完全加载。如果不支持pushState,则PJAX将
问题内容: 我想在PDF文件的每一页中添加一段文字。这样的答案很好。但是,文本将添加到页面顶部。我想在每页底部添加我的文字。我该怎么做呢? 这是代码的相关部分。 该代码是功能的一部分,该功能接受一个文件夹,读取其中的PDF文件,然后将它们合并为一个文件。因此,我想在上述循环本身中添加文本,而不是再次迭代文件。 问题答案: 请参阅《 iText in Action,第二版》的第6章,尤其是在6.4.