1

私はこれのために一日中グーグルで検索してきました...私はまだhtml/css/php/javascriptの初心者なので、おそらくいくつかの初歩的な間違いがありますが、それがあなたが私を助けるためにここにいる理由です! そのため、静的テンプレートと動的に読み込まれたコンテンツを備えた動的 Web サイトがあります。たとえば、「About Us」リンクをクリックすると、テンプレートは同じままですが、コンテンツは別の .php ファイルから読み込まれ、$_GET メソッドを使用して同じインデックスの iframe に出力されます。私は iframe を使用しているので、テンプレートのレイアウトには影響しません。私の問題は、ナビゲーション リンクのいずれかをクリックするたびにアニメーションを含む .js ファイルが実行されることです。そのため、たとえば、Web サイト全体が読み込まれるとフェードインすることができなくなります。リンクをクリックするたびに、ウェブサイト全体が消えて再びフェードインします。私はしません Google の使い方が間違っていることはわかっていますが、問題の解決策が見つかりません。リンクをクリックするたびにではなく、ページが読み込まれたときにそのスクリプトを 1 回だけ実行したい! コードの一部を次に示します。

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 を使用する必要があります。

これを行う最も簡単な方法の 1 つは、jQuery のload()メソッドを使用することです (クリックするとドキュメントが表示されます)。

ドキュメントを見て、簡単な例を試してみてください。

注: コメントで既に述べたように、この機能を簡単に実現しようとするフレームワークはたくさんあります。いくつか例を挙げると、backbone.js、angularjs、および ember.js を見てください。また、さらに多くのことを追加するので、何をしようとしているのかによってはやり過ぎかもしれませんが、一見の価値があります。

于 2013-10-22T14:31:12.620 に答える
0

iframe コンテンツを ajax で呼び出そうとしましたか? そうすれば、js 関数と同時に php が呼び出されます。

于 2013-10-22T14:20:01.527 に答える