2013-09-23 40 views
1

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

我的代码是这样的:

$('#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调用。

感谢您的支持。

回答

1

你可能喜欢用window.history对象

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

所以后退按钮可以被修改为\

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

和你的前进按钮可以被修改为

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

干杯!

+0

感谢您的回答。它会在Ajax上工作吗? – Selvamani

+1

如果您正在iframe之外运行代码,这不仅适用吗? –

+0

凯文是对的,这只会从iframe外部工作。 –