JQuery AJAX 使用 load() 导航多次重新加载资源（音频）

Question

我正在使用 JQuery load() 函数（$.ajax() 的包装器）来获取确定的 DIV.

但是我遇到了下一个问题； load() 获取（并加载，显然）音频和视频等资源；因此页面无法正常运行。

我正在使用下一个代码：

var container =  $("#container"), url = "mydomain.com/page2/ #content";

container.load(url, function(data) {
    // Set the new title.
    document.title = $(data).filter('title').text();
});

总结：

每次用户浏览页面时，音频都会作为 GET 请求重新加载。

然后音乐重叠，一下子响起...

我要检索其内容的页面的表示（我将仅使用#content 中的 HTML）：

<!DOCTYPE html>
<html>
    <head>  
        <title>Title of the page</title>  
    </head>
    <body>

       <div id="content"> Hello <b>world</b> this is the content I want to get.</div>

       <audio autoplay loop preload="auto">
           <source src="mydomain/wp-content/themes/mytheme/resources/audio/road.mp3" type="audio/mpeg"/> 
           <source src="mydomain/wp-content/themes/mytheme/resources/audio/road.ogg" type="audio/ogg"/> 
       </audio>

    </body>
</html>

任何人都知道如何避免 #content 之外的资源负载（ 音频，至少 ）？

Answer 1

Jquery代码

$(document).on('click', 'a[rel*=charger_partiel]', function(f) { 

f.preventDefault();

var myId_to_update_here = $(this).data('ajax'); 

var myId_to_load_from_other_page = $(this).data('direction');       

    var afficher_chargement = $(this).data('icon');

    var chargement_devant_lien = $(this).data('filter');

    var image_de_chargement = '<img src="images/facebook_style_loader.gif" />';



    if(chargement_devant_lien!='')
    {
        $('#'+chargement_devant_lien).html(image_de_chargement);
    }
    //Fin de l'affichage du chargement si l'id du span du devant lien est mis   


    if(afficher_chargement=='Oui')
    {
        $('#'+myId_to_update_here).html(image_de_chargement);
    }
    //Fin de l'affichage du chargement si le data-icon='Oui'




  $('#'+myId_to_update_here).load($(this).attr('href')+' #'+myId_to_load_from_other_page




  , function(responseText, textStatus, XMLHttpRequest) {
            if(textStatus == 'error') {
                $('#'+myId_to_update_here).html('<p>Oupps.. There was an error making the AJAX request. Maybe your internet connection is slowing down.</p>');
            }
        });



        if(chargement_devant_lien!='')
    {
        $('#'+chargement_devant_lien).html('');
    }
    //Fin de l'affichage du chargement si l'id du span du devant lien est mis



  return false;
});

现在Html

如果您的 div 已在每个页面上正常工作，您现在所要做的就是设置参数

<a href="mypage.php" rel="charger_partiel" data-direction="content"    data-ajax="container">charger_partiel</a>

取决于您所在的页面以及您要加载的页面和加载的页面

<a href="mypage.php" rel="charger_partiel" data-direction="container"    data-ajax="content">charger_partiel</a>

Mypage.php 是您要从中加载信息的页面（不是您所在的页面）

数据方向显示您要从哪里加载它（div）

和数据 ajax 您要将其加载到的位置

这是基于jquery的最新版本。如果您使用的不是最新版本，则必须直接点击，而不是点击。

Answer 2

好吧，比如load()函数重新加载资源audio，我在第二页实现了一个控件来检查请求是否是AJAX请求：

// Code of the "page.php" file.

$Is_AJAX = !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' ? true : false;

// If is an AJAX request we don't need the header
if(!$Is_AJAX) get_header(); ?>

<div id="container">
    <div  id="content">
    <?php while ( have_posts() ) : the_post(); ?>

        <?php get_template_part( 'content', 'page' ); ?>

        <?php
            if ( comments_open() || '0' != get_comments_number() )
                comments_template();
        ?>

    <?php endwhile; ?>
    </div>
</div>

// If is an AJAX request we don't need the header (the audio resources are in the footer).
<?php if(!$Is_AJAX) get_footer(); ?>

通过这种方式我们也获得最快的页面加载，因为只有我们获得想要的页面的内容（忽略header.php和footer.php 一个 Wordpress 主题)。

我看到他的唯一缺点是我无法获取请求页面的标题（因为它在 header 中），但我创建了一个隐藏 div 其中包含每个页面的标题以解决此问题：

// This code goes in the "page.php" file.
<div class="hidden" id="title_Page"><?php wp_title('|', true, 'right'); ?></div>

JQuery AJAX 使用 load() 导航多次重新加载资源（音频）

JQuery AJAX Navigation using load() reload resources several times (audio)

javascript

ajax

wordpress

jquery

jquery-load

总结：

我要检索其内容的页面的表示（我将仅使用#content 中的 HTML）：