1

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

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

4

3 回答 3

2

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

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

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

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

注意：正如评论中已经提到的，有很多框架试图让这个功能更容易实现。看看backbone.js、angularjs 和ember.js 等等。它们还添加了更多内容，因此取决于您尝试执行的操作，可能有点矫枉过正，但值得一看。

于 2013-10-22T14:31:12.620 回答
0

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

于 2013-10-22T14:04:09.490 回答
0

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

于 2013-10-22T14:20:01.527 回答