Question

晚上好，

我目前正在为一个在线游戏的粉丝网站开发一个网站。我试图将它放到顶部（徽标，无线电面板和导航栏）不会在新的页面调用上重新加载的位置，因此收音机不刷新并花几秒钟重新开始播放。

使用ajax，我可以很容易地让不同的页面加载工作，但是当我回到使用jquery和javascript的页面时，它不会重新加载内容。

http://habbfinity.ca/V4$-$4V/是当前的测试网址。当您第一次访问时，Twitter提要，最近发布的帖子和最近的徽章的顶部部分正常工作。转到Habbfinity下拉到“关于我们”然后回到“主页”，可以防止这三个内容框正确加载，并且最近的指南图像上的工具提示无法正常工作。

这是使用的ajaxpage脚本：

/***********************************************
* Dynamic Ajax Content- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar = 1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects = ""
var rootdomain = "http://" + window.location.hostname
var bustcacheparameter = ""

function ajaxpage(url, containerid) {
    var page_request = false
    if (window.XMLHttpRequest) // if Mozilla, Safari etc
        page_request = new XMLHttpRequest()
    else if (window.ActiveXObject) { // if IE
        try {
            page_request = new ActiveXObject("Msxml2.XMLHTTP")
        }
        catch (e) {
            try {
                page_request = new ActiveXObject("Microsoft.XMLHTTP")
            }
            catch (e) { }
        }
    }
    else
        return false
    page_request.onreadystatechange = function () {
        loadpage(page_request, containerid)
    }
    if (bustcachevar) //if bust caching of external page
        bustcacheparameter = (url.indexOf("?") != -1) ? "&" + new Date().getTime() : "?" + new Date().getTime()
    page_request.open('GET', url + bustcacheparameter, true)
    page_request.send(null)
}

function loadpage(page_request, containerid) {
    if (page_request.readyState == 4 && (page_request.status == 200 || window.location.href.indexOf("http") == -1))
        document.getElementById(containerid).innerHTML = page_request.responseText
}

function loadobjs() {
    if (!document.getElementById)
        return
    for (i = 0; i < arguments.length; i++) {
        var file = arguments[i]
        var fileref = ""
        if (loadedobjects.indexOf(file) == -1) { //Check to see if this object has not already been added to page before proceeding
            if (file.indexOf(".js") != -1) { //If object is a js file
                fileref = document.createElement('script')
                fileref.setAttribute("type", "text/javascript");
                fileref.setAttribute("src", file);
            }
            else if (file.indexOf(".css") != -1) { //If object is a css file
                fileref = document.createElement("link")
                fileref.setAttribute("rel", "stylesheet");
                fileref.setAttribute("type", "text/css");
                fileref.setAttribute("href", file);
            }
        }
        if (fileref != "") {
            document.getElementsByTagName("head").item(0).appendChild(fileref)
            loadedobjects += file + " " //Remember this object as being already added to page
        }
    }
}

这是我的index.php的样子：

<?php
require('../panel/includes/config.php');
include 'header.php';
?>
      <div id="contfill">
        <?php include 'home.php'; ?>
      </div>
<?php
include 'footer.php';
?>

在header.php中，我有以下设置，可以正确调用页面加载链接：

<a href="javascript:ajaxpage('about.php', 'contfill');">About</a>
<a href="javascript:ajaxpage('home.php', 'contfill');">Home</a>

有问题的三个脚本是：

<a class="twitter-timeline" data-lang="en" data-width="250" data-height="200" data-theme="light" href="https://twitter.com/Habbfinity">Tweets by Habbfinity</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

+

<script type="text/javascript" src="http://habbfinity.ca/forum/external.php?type=js"></script> 
              <script language="" type="text/javascript">
                <!--
                for (x = 0; x < 4; x++) {
                    document.writeln("<a href=\"http://habbfinity.ca/forum/showthread.php?t="+threads[x].threadid+"\" target=\"_blank\">"+threads[x].title+"</a> <br>(Posted By: "+threads[x].poster+")<br><br />");
                }
                //-->
              </script>

+

<script>
      $(function() {
          var badgeUrl = 'http://habboo-a.akamaihd.net/c_images/album1584/';
          $.getJSON( 'http://habboemotion.com/api/badge', function( badges ) {
              $.each( badges.list, function( key, badge ) {
                  $('div#badges').append('<img src="'+badgeUrl+badge.code+'.gif" class="thumbnail aleft" alt="Badge" data-toggle="tooltip" data-placement="top" data-html="true" title="'+badge.name+' - '+badge.desc+'">');
                  return (key !== 29);
              });
          });
      });
    </script>

修改

我决定使用带有.htaccess和switch case的URL路径方法加载相应的页面。

的.htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [QSA,L]

的index.php

<?php
function getCurrentUri() {
    $basepath = implode('/', array_slice(explode('/', $_SERVER['SCRIPT_NAME']), 0, -1)) . '/';
    $uri = substr($_SERVER['REQUEST_URI'], strlen($basepath));
    if (strstr($uri, '?')) $uri = substr($uri, 0, strpos($uri, '?'));
    $uri = '/' . trim($uri, '/');
    return $uri;
}
require('../panel/includes/config.php');
include 'header.php';
?>
      <div id="contfill">
        <?php
          $base_url = getCurrentUri();
          switch ($base_url) {
              case '/':
                require 'home.php';
                break;
              case '/home':
                require 'home.php';
                break;
              case '/about':
                require 'about.php';
                break;
              default:
                header('HTTP/1.0 404 Not Found');
                require '404.php';
                break;
          }
        ?>
      </div>
<?php
include 'footer.php';
?>

正常工作。我确信有一种更简单的方法可以做到这一点，但只要它有效，它对我来说没问题。

Answer 1

我认为this回答描述了让脚本运行所需要做的事情。它们是第一次加载页面时工作，因为index.php返回的HTML已经包含<script>中的所有home.php标记，这些标记将在加载页面时执行，但不会在通过设置容器的innerHTML来添加它们。

ajax页面更改后，Jquery / Javascript不会重新加载

1 个答案: