使用history.js在iframe中的后退按钮 [英] back button inside a iframe using history.js

问题描述

我在RoR做一个项目。该项目位于iFrame中。在那个iframe有前进和后退按钮。当我单击向后按钮时，iframe内容应该返回但不是整个浏览器页面。我正在使用 histroy.js 插件。但我不知道如何使用它。

I am doing a project in RoR. That project is inside a iFrame. In that iframe have forward and back button. When I click backward button, the iframe content should go back but not the whole browser page. I am using "histroy.js" plugin. But I don't know how to use it.

我的代码是：

$('#back-btn').on('click', function () {
    History.back();
});

$('#forward-btn').on('click', function () {
    History.forward();
});

$("a").click(function () {
    n = 1;
    q = n++;
    var s = $(this).attr("href");
    var o = 'History.pushState({state:' + q + ',rand:Math.random()}, "State 1", \"' + s + '\");'
    $("#z").empty().append('<button onclick=\'javascript:' + o + '\'>sds</button>');
    $("#z button").click();


    //this is for checking log
    (function (window, undefined) {

        var
        History = window.History, // Note: We are using a capital H instead of a lower h
            State = History.getState(),
            $log = $('#log');

        // Log Initial State
        History.log('initial:', State.data, State.title, State.url);

        // Bind to State Change
        History.Adapter.bind(window, 'statechange', function () { // Note: We are using statechange instead of popstate
            // Log the State
            var State = History.getState(); // Note: We are using History.getState() instead of event.state
            History.log('statechange:', State.data, State.title, State.url);
        });
    })(window);
})

注意：有时我使用的是ajax调用。

Note: Sometimes I am using ajax call.

感谢您的支持。

推荐答案

您可能想要使用 window.history object

you may like to use the window.history object

iframe.contentWindow.history.go(-1); // back
iframe.contentWindow.history.go(1);  // forward

所以您的后退按钮可以修改为\

so your back button can be modified as \

$('#back-btn').on('click', function () {
    iframe.contentWindow.history.go(-1);
                 or
    iframe.contentWindow.history.back(); 
});

您的转发按钮可以修改为

and your forward button can be modified as

$('#forward-btn').on('click', function () {
  iframe.contentWindow.history.forward();
                or
  iframe.contentWindow.history.go(1);
});

干杯！

这篇关于使用history.js在iframe中的后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！