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

Question

我整天都在搜索……我仍然是html / css / php / javascript的初学者，所以我可能会有一些菜鸟错误，但这就是你们在这里帮助我的原因！ 因此，我有一个带有静态模板和动态加载内容的动态网站。 例如，当我单击“关于我们”链接时，模板保持不变，但是内容使用$ _GET方法从另一个.php文件加载并在同一索引的iframe中打印出来。 我正在使用iframe，因此不会影响模板布局。 我的问题是，每次单击任何导航链接时，带有动画的.js文件都会执行，因此它希望，例如，一旦无法加载，它就会淡入整个网站。 每次我单击链接时，整个网站都会消失并再次消失。 我不知道我使用Google是否有误，但是找不到解决我问题的方法。 我只希望该脚本在页面加载时运行一次，而不是在单击链接时运行！ 以下是部分代码：

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()方法（单击以获取文档）。

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

注意 ：正如评论中已经提到的，有很多框架试图使实现此功能更加容易。 来看一下ribs.js，angularjs和ember.js，仅举几例。 它们还增加了很多，因此根据您要执行的操作，可能会显得过大，但是值得一看。

Answer 2

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

Answer 3

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