单击按钮重新加载外部文件

Question

在下面的脚本中，我将外部 HTML 文件加载到具有 id 的 div 中。

而且它工作正常。

但是我每次点击按钮都需要重新加载外部文件。

外部文件被加载到模型弹出窗口内的 div 中。当单击按钮时，模型弹出窗口出现并显示滑块（外部文件），关闭模型弹出窗口后，当我们第二次按下按钮时，弹出窗口出现但不显示滑块。所以我只是计划每次按下按钮时刷新外部文件。

<div id="myModel">

<div id="div" style="width:500px; height:400px;"></div>

</div>

<!-- script for ajax load -->

$("#button").click(function(){
    $("#div").load("sliderifame.html");
});

<!-- script for model popup -->

 $('#button').click(function (e) {
    $('#myModel').modal();
    return false;
});

<!-- sliderifame.html content -->

    <div class="mygallery">
    <div class="tn3 album">
        <h4>Fixed Dimensions</h4>
        <div class="tn3 description">Images with fixed dimensions</div>
        <div class="tn3 thumb">images/35x35/1.jpg</div>
        <ol>
        <li>

            <a href="images/presentation/Slide01.jpg">

            </a>
        </li>
        <li>

            <a href="images/presentation/Slide02.jpg">

            </a>
        </li>
        <li>

            <a href="images/presentation/Slide03.jpg">

            </a>
        </li>

        </ol>
    </div>
    </div>

    </body>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="js/jquery.tn3lite.min.js"></script>


 <script type="text/javascript">
$('a.media').media({width:620, height:410});
</script>  

<!--  initialize the TN3 when the DOM is ready -->
<script type="text/javascript">
    $(document).ready(function() {
        //Thumbnailer.config.shaderOpacity = 1;
        var tn1 = $('.mygallery').tn3({
skinDir:"skins",
imageClick:"fullscreen",
image:{
maxZoom:1.5,
crop:true,
//clickEvent:"dblclick",
transitions:[{
type:"blinds"
},{
type:"grid"
},{
type:"grid",
duration:460,
easing:"easeInQuad",
gridX:1,
gridY:8,
// flat, diagonal, circle, random
sort:"random",
sortReverse:false,
diagonalStart:"bl",
// fade, scale
method:"scale",
partDuration:360,
partEasing:"easeOutSine",
partDirection:"left"
}]
}
});
});
</script>

Answer 1

您的代码已经在每次点击时刷新页面。 但是你的页面是html文件，你必须防止缓存

我的解决方案是使用查询字符串来防止缓存：

$("#button").click(function(){
    url = "sliderifame.html";
    url += '?_=' + (new Date()).getTime();
    $("#div").load(url);
});

当您的 cmets 您的问题是模式窗口中的加载内容 正如我所说，您必须使用 iframe 模态窗口并防止内容缓存

我已将您的代码编辑如下

$(function () {
    var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>');
    var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        width: "auto",
        height: "auto",
        close: function () {
            iframe.attr("src", "");
        }
    });
    $("#button").on("click", function (e) {
        e.preventDefault();

        //change url with your sliderifram.html
        var url = "http://fiddle.jshell.net/r6uq14v6/1/show/"; 
        url += '?_=' + (new Date()).getTime();

        var src = url;
        var title = "slider content";
        var width = 600;
        var height = 600;
        iframe.attr({
            width: +width,
            height: +height,
            src: src
        });
        dialog.dialog("option", "title", title).dialog("open");
    });
});

请注意，库必须使用 jquery 和 jquery ui 进行对话框

主页源代码：link 滑块源代码：link