Question

在我的CodeIgniter Web应用程序中，每次用户点击导航中的链接时，我都会更改iframe元素的src属性。

我设法通过HTML 5的历史API创建了一个可用的历史记录，现在URL正在相应地更改。但是因为这些URL实际上并没有指向我的应用程序中实际存在的位置，所以每当我在浏览器中刷新页面或者用户将该页面加入书签并稍后将重新访问该页面时，我会收到404错误。

现在我想知道如何使用这些URL可以将我的应用程序设为可收藏。

以下是用户点击导航节点时的代码：

$(document).on('click', '.node', function(event) {
            var nodeName = $(this).text();

            $('.node').removeClass('active');
            $(this).addClass('active');

            //Load Links
            $.ajax({
                url: '<?php echo base_url('ajax/loadLinks'); ?>',
                type: 'POST',
                data: {nodeName: nodeName},
                success: function(data) {
                    $('.links').remove();
                    $('nav').append(data);
                }
            });

            $('html,body').css("background-color", "#3C5575");


            //History manipulation
            var href = $(this).attr('href');
            var nodeId = $(this).attr('id'); 

            var stateObj = {
                url: href,
                nodeId: nodeId
            };

            changeIframeSrc(document.getElementById("iframe"), href);
            history.pushState(stateObj, nodeName, nodeName);
        });

以下是popstate事件：

$(window).on('popstate', function(event) {
        //console.log(event.state); 
        changeIframeSrc(document.getElementById("iframe"), history.state.url);
        //$('#iframe').attr('src', event.state.url);
        $('.node').removeClass('active');
        $('#' + history.state.nodeId).addClass('active');
    });

这是我切换iframe的src属性以防止它生成2个历史条目的函数：

var changeIframeSrc = function(iframe, src) {
        var frame = iframe.cloneNode(false);
        frame.src = src;
        iframe.parentNode.replaceChild(frame, iframe);
    };

使用更改iframe src的MVC Web应用程序中的书签

0 个答案: