Как получить URL из оверлея, если веб-страница была показана в оверлее - PullRequest
Новая
       0

Как получить URL из оверлея, если веб-страница была показана в оверлее

0 голосов
/ 28 июля 2011

У меня есть страница поиска.Теперь я хотел открыть страницу поиска, когда пользователь нажимает на определенную ссылку.Теперь я выполняю поиск по запросу, выбираю фильтр, чтобы продолжить, новые параметры добавляются в URL.

Например, когда я выполняю поиск запроса "club" в поиске Google, я вижу следующий URL. 

     http://www.google.com/#sclient=psy&hl=en&source=hp&q=club&pbx=1&oq=club&aq=f&aqi=g5&aql=&gs_sm=e&gs_upl=257848l258668l2l259633l5l4l0l0l0l3l462l1655l3-1.3l4&bav=on.2,or.r_gc.r_pw.&fp=aeb16183bfd07c66&biw=1280&bih=628

Теперь я фильтрую свой поиск и выбираю фильтр изображений из опций слева. Мой URL выглядит следующим образом: 

    http://www.google.com/search?q=club&hl=en&biw=1280&bih=628&prmd=ivnsm&source=lnms&tbm=isch&ei=_4wwTsvfNdDQsgac0cz0Dw&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CBAQ_AUoAQ

Теперь я хочу поместить свою страницу поиска в наложение.И тогда, когда пользователь завершит весь поиск, он может нажать кнопку «ОК» в правом нижнем углу наложения.Поэтому, когда пользователь нажимает «ОК», я хочу URL-адрес, который генерируется, когда страница поиска обычно открывается в окне вкладок, как показано выше для случая Google.

1 Ответ

0 голосов
/ 28 июля 2011

Наложение (или модальное наложение в приведенном вами примере) для отдельного сайта можно выполнить с помощью JavaScript, css и iframe.

Если вы заинтересованы в использовании существующей библиотеки,jQuery UI имеет очень хороший оверлей, который они называют диалогом.http://jqueryui.com/demos/dialog/

Если вы не хотите использовать библиотеку, вы должны сделать что-то похожее на следующий код.Примечание. Этот код является очень простым и не предоставляет много функций, доступных при использовании библиотеки, которая обрабатывает наложения. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
    <script language="javascript" type="text/javascript">

    //Define a class to create and control the overlay
    function overlay(width, height) {

        var container, iframe;

        this.setLocation = function(url) {
            iframe.setAttribute('src', url);
        }

        this.getLocation = function(url) {
            return iframe.getAttribute('src');
        }

        this.show = function() {
            container.style.display = 'block';
        }

        this.hide = function() {
            container.style.display = 'none';
        }

        function windowSize() {
            var winW = 630, winH = 460;
            if (document.body && document.body.offsetWidth) {
                winW = document.body.offsetWidth;
                winH = document.body.offsetHeight;
            }
            if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {
                winW = document.documentElement.offsetWidth;
                winH = document.documentElement.offsetHeight;
            }
            if (window.innerWidth && window.innerHeight) {
                winW = window.innerWidth;
                winH = window.innerHeight;
            }
            return [ winW, winH ];
        };

        (function() {
            //create the containing element
            container = document.createElement('div');
            container.style.position = 'fixed';
            container.style.top = '0px';
            container.style.left = '0px';
            container.style.right = '0px';
            container.style.bottom = '0px';
            container.style.zIndex = 1000;
            container.style.backgroundColor = 'rgba(0, 0, 0, .5)';

            //create the iframe
            iframe = document.createElement('iframe');
            iframe.setAttribute('frameborder', 0);
            iframe.style.position = 'absolute';
            iframe.style.width = width + 'px';
            iframe.style.height = height + 'px';
            iframe.style.left = ((windowSize()[0] - width) / 2) + 'px';
            iframe.style.top = ((windowSize()[1] - height) / 2) + 'px';

            container.appendChild(iframe);
            document.body.appendChild(container);
        })(this)

    }

    //create an overlay object, set it's location, and show it
    var win = new overlay(700, 400);
    win.setLocation('http://www.google.com/');
    win.show();

    </script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...