在我的网站内实现一个地址栏


implementing a address bar inside my site

我想在我的网站中有一个地址栏或url栏,具有基本功能,如后退,前进,刷新,停止。也许更复杂,但也有一种存储历史的方法。我到处都找遍了。

thanks to all for help

我喜欢Quasdunk的评论,因此这是一个优点:)即使看着这个小块,我也看不出有什么理由去实现它,但嘿,也许它是为了一些我们无法感知的惊人的东西。

无论如何,这里是你应该如何实现它的大致方法:

$(function () {
        window.myBrowser = {
            'addressBar': $('#addressBar'),
            'browserWindow': $('#browserWindow'),
            'backBtn': $('#backBtn'),
            'forwardBtn': $('#forwardBtn'),
            'goBtn': $('#goBtn')
        };
        myBrowser.goBtn.click(function (event) {
            event.preventDefault();
            var address = myBrowser.addressBar.val();
            if (address && address.indexOf('http://') > -1) {
                myBrowser.browserWindow.attr('src', myBrowser.addressBar.val());
            }
            else if (address) {
                myBrowser.browserWindow.attr('src', 'http://' + myBrowser.addressBar.val());
            }
            // maybe play a little more to get the www and the rest into account
            // don't want to do the whole thing for you :)
        });
        myBrowser.backBtn.click(function (event) {
            event.preventDefault();
            browserWindowFrame.history.back();
        });
        myBrowser.forwardBtn.click(function (event) {
            event.preventDefault();
            browserWindowFrame.history.forward();
        });
    });

正文是:

<a href='#' id='backBtn'>back</a>
<a href='#' id='forwardBtn'>forward</a>
<input type="text" id='addressBar' />
<a href='#' id='goBtn'>Go</a>
<iframe id='browserWindow' src='' name='browserWindowFrame'></iframe>