Показать часть страницы в новом окне

#javascript #.net #new-window

#javascript #.net #новое окно

Вопрос:

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

введите описание изображения здесь

 function openNewWindow() {
        var pr = window.open("Page.aspx", "page", "width=700, height=400");  
        pr.onload() = function() {  
            pr.document.getElementById("header").style.display = 'none';  
        }
    }

Возможно ли установить какое-либо смещение для страницы в новом окне? Нравится left:-40px и top:-20px или что-то подобное? Я знаю, что top и left позиционирует новое окно, а не его содержимое, но могу ли я что-нибудь сделать, чтобы изменить положение фактического содержимого?

Есть ли обходной путь или другое решение с тем же результатом?

Редактировать
Когда я нажимаю <a href="javascript:openNewWindow(); return false;">Click</a> , я хочу, чтобы Page.aspx (изображение выше) открывался в новом окне, но без отображения меню и заголовка.

Ответ №1:

как насчет того, чтобы открыть страницу, которая показывает iframe, который загружает вашу страницу — и затем вы можете установить ширину / высоту вашего iframe на то, что вам нужно, и предоставлять ли прокрутку или нет? что-то вроде этого:

 <html>
<!-- this is page2.aspx -->
<body>
<!-- header -->
<!-- menu -->
<iframe id="abc"...></iframe>
<script type="text/javascript">
 var page = ... //retrieve the value of the parameter "url" passed to us (you can find how to do this by googling)
 document.getElementById( "abc" ).src = page; //set the iframe url to the parameter passed
</script>
</body>
</html>

затем ваша функция становится:

 function openNewWindow() {
        window.open("Page.aspx?url=http://page/to/load", "page", "width=700, height=400");
}

Ответ №2:

Загрузите страницу целиком, но скройте заголовок и меню с помощью Javascript:

 newwindow.onload = function() {
    newwindow.document.getElemementById('header').style.display = 'none';
    newwindow.document.getElemementById('menu').style.display = 'none';
}

(или используйте .hide() метод jQuery)

Загрузите страницу целиком, но добавьте дополнительную таблицу стилей, которая устанавливает заголовок и меню скрытыми:
```
 #header, #menu {display:none !important;}
  
```
при обслуживании страницы используйте другой шаблон, который не включает заголовок, меню и т.д. При прочих равных условиях это, вероятно, было бы лучшим вариантом, но я не могу дать никаких советов по этому поводу, не зная больше информации о вашем коде.

(все вышесказанное предполагает, что у вас есть идентификаторы в вашем заголовке и меню, которые я указал; измените по мере необходимости)

1. Я попробовал первый вариант: var pr = window.open('Pag... и затем pr.document.getElementById('header').style.display = 'none'; почувствовал, что это должно было сработать, нет?

2. @Niklas — вам нужно подождать, пока страница загрузится, поэтому поместите свой код внутрь pr.onload = function() {.....} (я отредактировал ответ, чтобы показать его более четко)

3. Я изменил JS в своем вопросе, но, думаю, я не все понимаю, потому что он все еще не работает = (

4. Я должен снять пометку с этого ответа. Вы видите что-нибудь неправильное в моем js?

Ответ №3:

Согласен со Спадли, но если это невозможно, вы могли бы обойтись отрицательными полями. Вот так:

тело { поле: -50px 0 0 -50px}