在我的网站内实施地址栏

时间:2011-08-07 22:17:20

标签: php javascript jquery html css

我希望在我的网站中有一个地址栏或网址栏,其中包含后退,前进,刷新,停止等基本功能。也许更复杂但也有办法存储历史。我一直在寻找。

感谢所有人的帮助

1 个答案:

答案 0 :(得分:5)

我喜欢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>