我为此搜索了一整天......我仍然是 html/css/php/javascript 的初学者，所以我可能会犯一些菜鸟错误，但这就是你们来这里帮助我的原因! 所以，我有一个带有静态模板和动态加载内容的动态网站。例如，当我单击“关于我们”链接时，模板保持不变，但内容从另一个 .php 文件加载并使用 $_GET 方法在同一索引的 iframe 中打印出来。我正在使用 iframe，因此不会影响模板布局。我的问题是，每次我单击任何导航链接时，我的带有动画的 .js 文件都会被执行，所以这让我希望，例如，一旦加载不可能就淡入整个网站。每次我单击一个链接时，整个网站都会消失并再次淡入淡出。我不知道我是不是用错了谷歌，但我找不到解决我问题的方法。我只希望该脚本在页面加载时运行一次，而不是在我单击链接时运行一次!以下是部分代码:
index.php 的一部分:
<?php
include('setup/setup.php');
?>
<html>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="javascript.js"></script>
<body>
<div class="wrapOverall">
<div class="header">Logo, language buttons etc.</div>
<div class="wrapMainNav">Main navigation (Home, About us etc.)</div>
<div class="content">
<iframe src=<?php echo "content_$language/$pg.php"; ?> frameborder="0" style="width:951px; height:486px;">aaa</iframe>
</div>
</div>
</body>
</html>
其中“content_$language”是我从中获取文件的文件夹，“$pg.php”是文件本身。
setup.php 文件:
<?php
error_reporting(E_ALL ^ E_NOTICE);
if($_GET['page'] == '')
{
$pg = 'naslovna';
}
else
{
$pg = $_GET['page'];
}
if($_GET['lang'] == '')
{
$language = 'cro';
}
else
{
$language = $_GET['lang'];
}
?>
javascript.js 文件:
$(document).ready(function() {
$(".wrapOverall").hide(); //Hide the website
$("html").css("visibility", "visible");
var bg = new Image();
bg.src = "images/background.jpg";
bg.onload = function(){ //Load the background image
$("html").css("background-image", "url(images/background.jpg)");
$("html").css("background-repeat","no-repeat");
$("html").css("background-attachment", "fixed");
$("html").css("background-position", "center");
$(".wrapOverall").fadeIn(1000); //Fade in the site
$(".content").animate({height:'468px'},1000); //Animate content loading
}
});
就是这样，如果你们认为您需要更多代码，我可以发送给您。
最佳答案
每次您单击一个链接，并且 URL 发生变化时，浏览器都会向服务器发出一个 GET 请求以获取该页面。 PHP 将返回该页面并且浏览器将重新加载它，即使它与您访问的上一个页面有 95% 相同。它将重新呈现 DOM，因此 $(document).ready 事件将再次触发。
您想要做的是刷新页面的一部分而不向服务器发出整个页面的 GET 请求。为此，您需要使用 AJAX。
执行此操作的最简单方法之一是使用 jQuery 的 load()方法(点击文档)。
查看文档并尝试一个简单的示例，希望这能帮助您入门。
注意:正如评论中已经提到的，有很多框架试图使实现此功能更容易。看看 backbone.js、angularjs 和 ember.js 等等。它们还添加了更多内容，因此根据您尝试执行的操作，它们可能有点矫枉过正，但值得一看。
关于javascript - 每次单击链接时都会执行 .js 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19520050/