Question

我一直在谷歌上搜索这一天...我仍然是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 
    }
});

就是这样，如果你们认为你需要更多代码我可以发送它。

Answer 1

每次单击链接并更改URL时，浏览器都会向该页面的服务器发出GET请求。 PHP将返回页面，浏览器将重新加载它，即使它与你上一页的95％相同。它将重新渲染DOM，因此$(document).ready事件将再次触发。

您要做的是刷新页面的一部分而不向整个页面的服务器发出GET请求。为此，您需要使用AJAX。

最简单的方法之一是使用jQuery的load()方法（点击查看文档）。

查看文档并尝试一个简单的示例，希望这可以帮助您入门。

注意：正如评论中已经提到的那样，有很多框架试图让这个功能更容易实现。看看backbone.js，angularjs和ember.js等等。它们还会增加更多，所以根据你想要做的事情，可能会有点矫枉过正，但值得一看。

Answer 2

由于您的javascript包含在每个页面中，因此每次加载页面时都会运行，因此会隐藏然后显示整个页面。您应该在加载其他页面时将其排除。

Answer 3

您是否尝试使用ajax调用iframe内容？这样，php将在你的js函数的同时被调用。

每次单击链接时都会执行.js文件

3 个答案: