Jump to content
  • 0

Как показать информацию на этой же странице?

romoga

Asked by romoga,

 Share

Question

romoga Explorer

romoga

Posted
Posted (edited)

Как показать внешнюю страницу в этом же окне?

имеется страница-меню слева. Так вот как подгружать внешние html странички без перезагрузки основной страницы...чтобы они открывались с права.

что лучше использовать фреймы дивы??

 

Edited by romoga
Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
romoga Explorer

romoga

Posted
  • Author
Posted

Нашел код

    <html>      <head>      <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">      <script>          function showContent(link) {                    var cont = document.getElementById('contentBody');              var loading = document.getElementById('loading');                    cont.innerHTML = loading.innerHTML;                    var http = createRequestObject();              if( http )               {                  http.open('get', link);                  http.onreadystatechange = function ()                   {                      if(http.readyState == 4)                       {                          cont.innerHTML = http.responseText;                      }                  }                  http.send(null);                  }              else               {                  document.location = link;              }          }                // создание ajax объекта          function createRequestObject()           {              try { return new XMLHttpRequest() }              catch(e)               {                  try { return new ActiveXObject('Msxml2.XMLHTTP') }                  catch(e)                   {                      try { return new ActiveXObject('Microsoft.XMLHTTP') }                      catch(e) { return null; }                  }              }          }      </script>      </head>            <body>                <p>Какую страницу желаете открыть?</p>                    <form>              <input onclick="showContent('page1.html')" type="button" value="Страница 1">              <input onclick="showContent('page2.html')" type="button" value="Страница 2">          </form>                    <div id="contentBody">          </div>                <div id="loading" style="display: none">          Идет загрузка...          </div>                </body>      </html>

но он загружает и свои стили...

может есть у кого пример плавного появления страницы внутри другой ???

буду копать адльше

Link to comment
Share on other sites
  • 0
romoga Explorer

romoga

Posted
  • Author
Posted

начну заново....

есть главная страница

<html>      <head>      <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8"><link rel="stylesheet" href="main.css">          <script>          function showContent(link) {                    var cont = document.getElementById('contentBody');              var loading = document.getElementById('loading');                    cont.innerHTML = loading.innerHTML;                    var http = createRequestObject();              if( http )               {                  http.open('get', link);                  http.onreadystatechange = function ()                   {                      if(http.readyState == 4)                       {                          cont.innerHTML = http.responseText;                      }                  }                  http.send(null);                  }              else               {                  document.location = link;              }          }                // создание ajax объекта          function createRequestObject()           {              try { return new XMLHttpRequest() }              catch(e)               {                  try { return new ActiveXObject('Msxml2.XMLHTTP') }                  catch(e)                   {                      try { return new ActiveXObject('Microsoft.XMLHTTP') }                      catch(e) { return null; }                  }              }          }      </script>      </head>            <body>                   <form id="forma">               <a class="ssilka" onclick="showContent('svetoproz.html')"> Нажми!!!!! </a>           </form>                            <div id="contentBody">                 </div>             <div id="loading" style="display: block">          Идет загрузка...          </div>                </body>      </html>

есть файл стилей главной страницы

body{background: #ddd;font-size: 20px;top:0; left:0;margin:20;color: #000;font-size: 20px;z-index: 99999;}a:hover {cursor: pointer;}#contentBody{	position: inherit;	border: 5px solid #00c;	position:relative;	left:500px;	width: 600px;	height: 500px;	top: 0px;}

есть страница которую я хочу подгрузить в основную

вот она

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en"><head>       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    <title>Frame</title>     <link rel="stylesheet" href="menu.css" type="text/css" media="screen" />    </head><body>			 <ul id="panel">			<li class="animation"><a href="svet_naruj.html">Наружние</a></li>				<li class="animation"><a href="zimny-sad-sys.html">Системы зимних садов</a></li>			<li class="animation"><a href="planet_sys.html">Планарные системы</a></li>			<li class="animation"><a href="spider-sys.html">Спайдерная система</a></li>			<li class="animation"><a href="zajim-sys.html">Система на зажимах</a></li>			<li class="animation"><a href="svet_vnutr.html">Внутренние</a> </li>			<li class="animation"><a href="sklad-dveri.html">Складные двери</a> </li>			<li class="animation"><a href="razdvij-dveri.html">Раздвижные двери</a></li>   			<li class="animation"><a href="svet_rigel.html">Стоечно-ригельная конструкция</a></li>	</ul>                  <p style="text-align: justify;"><b>Светопрозрачные (светопропускающие) конструкции</b> относятся к группе ограждающих конструкций. Предназначены для обеспечения теплоизоляции, необходимой естественной освещённости и возможности визуального контакта с окружающей средой.</p>                <p style="text-align: justify;">Светопрозрачная конструкция может быть отдельно стоящим самостоятельным сооружением, примыкающим к зданию или элементом здания. Светопропускающие конструкции зданий классифицируются на наружные - ограждающие и внутренние.</p>           </body></html>

есть файл стилей анимированного меню подгружаемой страницы

#panel {     /*z-index: 0;*/    width:300px;    list-style:none;     padding-top:30px;    display:inline-block;}#panel li {      border-radius:3px 3px 3px 3px;     margin-top:5px;    width:150px;    background: #000000;    background: -moz-linear-gradient(top, #161616 0%, #000000 100%);    background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);    background: -o-linear-gradient(top, #161616 0%,#000000 100%);    border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;}#panel li a {     color:#fff;     display:block;     padding:10px;}#panel li a:hover {     color:#00c6ff;}#panel li.animation {     -moz-transition: all 0.4s ease-in-out;     -moz-transform:translateX(0px);     -o-transition: all 0.4s ease-in-out;     -o-transform:translateX(0px);     -webkit-transition: all 0.4s ease-in-out;     -webkit-transform:translateX(0px); }#panel li.animation:hover {     -moz-transform:translateX(25px);    -o-transform:translateX(25px);    -webkit-transform:translateX(25px);}

вроде все....

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

но контент выходит за рамки вниз...

Как грамотно вывести инфу достраницы в эту рамку?

скролл не приемлем

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • zeiger2
      Смена background-image при работе с псевдоклассом hover
      By zeiger2
      Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 
      background-image: none;     background: url(../img/check_icon_red.png) left no-repeat;   Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими
    • Seadjus
      Как оптимизировать код игры?
      By Seadjus
      Добрый день!
      Огромная просьба камнями не кидаться!
      Начал изучать JS , пока нет особых продвижений в изучении.
      помогите оптимизировать игру в пары. по условиям задания необходимо реализовать игру в пары с таймером, выбором количества карт .
      Ниже
      https://codepen.io/Seadjus/pen/VwVedaP
    • Mix9
      див уходит за границу экрана
      By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • ilya1203
      Написать файл скрипта, который считает объём комнаты
      By ilya1203
      Прошу помочь с заданием:
      Написать файл скрипта, который генерирует три числа, соответствующие значениям высоты, длины и ширины комнаты. Отобразить в консоли:
      a.Площадь стен комнаты
      b.Объём комнаты
      c.*Объём комнаты за вычетом случайно сгенерированного количества чисел, которые определяет объёмы случайно зашедших в комнату людей.
      (в итоге запустит скрипт последством консоли)
      (заранее огромное спасибо)
    • Kaido
      Как сделать чтобы закрывалось только одно модальное окно когда открыто несколько?
      By Kaido
      Использую готовый плагин для модальных окон(от MaxGraph). Проблема в том, что когда у меня открыто два модальных окна, для примера Форма + Политика конфендициальности, и мне нужно закрыть политику вместе с ней закрывается и другое модальное окно. В JS я не сильно разбираюсь(собственно из за этого и использую готовый плагин), можете помочь кто работал с этим плагином? Я примерно понимаю как он работает, но реализовать чтобы закрывалось только одно не получается.
       
        <div class="content"> <button class="modal-btn" data-path="first" data-animation="fadeInUp" data-speed="1500">Открыть окно 1</button> </div> <div class="modal"> <div class="modal__wrapp" data-target="first"> <div class="modal__content"> <button class="modal__close">Закрыть</button> модальное окно <button data-path="policy">Политика</button> </div> </div> <div class="modal__wrapp" data-target="policy"> <div class="modal__content"> <button class="modal__close">Закрыть</button> политика </div> </div> </div> .modal { --transition-time: 0.3s; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; cursor: pointer; overflow-y: auto; overflow-x: hidden; text-align: center; opacity: 0; visibility: hidden; transition: opacity var(--transition-time), visibility var(--transition-time); } .modal__wrapp { display: none; cursor: default; width: fit-content; height: fit-content; } .modal__content{ position: absolute; left: 500px; width: 500px; height: 500px; display: flex; color: white; flex-direction: column; text-align: left; background-color: #000; } .modal__content button{ width: 200px; height: 50px; margin: 50px 0; } .modal.is-open { opacity: 1; visibility: visible; transition: opacity var(--transition-time), visibility var(--transition-time); } .modal__wrapp.modal-open { display: flex; } .disable-scroll { position: relative; overflow: hidden; height: 100vh; position: fixed; left: 0; top: 0; width: 100%; } .fade { opacity: 0; transition: opacity var(--transition-time); } .fade.animate-open { opacity: 1; transition: opacity var(--transition-time); } .fadeInUp { opacity: 0; transform: translateY(vw(-100)); transition: opacity var(--transition-time), transform var(--transition-time); } .fadeInUp.animate-open { opacity: 1; transform: translateY(0); transition: opacity var(--transition-time), transform var(--transition-time); } .modal__wrapp[data-target="policy"] .modal__content{ left: 1050px; background-color: #000; opacity: .5; } class Modal { constructor(options) { let defaultOptions = { isOpen: () => {}, isClose: () => {}, } this.options = Object.assign(defaultOptions, options); this.modal = document.querySelector('.modal'); this.speed = false; this.animation = false; this.isOpen = false; this.modalContainer = false; this.previousActiveElement = false; this.fixBlocks = document.querySelectorAll('.fix-block'); this.focusElements = [ 'a[href]', 'input', 'button', 'select', 'textarea', '[tabindex]' ]; this.events(); } events() { if (this.modal) { document.addEventListener('click', function(e){ const clickedElement = e.target.closest('[data-path]'); if (clickedElement) { let target = clickedElement.dataset.path; let animation = clickedElement.dataset.animation; if (clickedElement.classList.contains('modal-close')) { this.close(); } let speed = clickedElement.dataset.speed; this.animation = animation ? animation : 'fade'; this.speed = speed ? parseInt(speed) : 300; this.modalContainer = document.querySelector(`[data-target="${target}"]`); this.open(); return; } if (e.target.closest('.modal__close')) { this.close(); return; } }.bind(this)); window.addEventListener('keydown', function(e) { if (e.keyCode == 27) { if (this.isOpen) { this.close(); } } if (e.keyCode == 9 && this.isOpen) { this.focusCatch(e); return; } }.bind(this)); this.modal.addEventListener('click', function(e) { if (!e.target.classList.contains('modal__wrapp') && !e.target.closest('.modal__wrapp') && this.isOpen) { this.close(); } }.bind(this)); } } open() { this.previousActiveElement = document.activeElement; this.modal.style.setProperty('--transition-time', `${this.speed / 1000}s`); this.modal.classList.add('is-open'); this.disableScroll(); this.modalContainer.classList.add('modal-open'); this.modalContainer.classList.add(this.animation); setTimeout(() => { this.options.isOpen(this); this.modalContainer.classList.add('animate-open'); this.isOpen = true; this.focusTrap(); }, this.speed); } close() { if (this.modalContainer) { this.modalContainer.classList.remove('animate-open'); this.modalContainer.classList.remove(this.animation); this.modal.classList.remove('is-open'); this.modalContainer.classList.remove('modal-open'); this.enableScroll(); this.options.isClose(this); this.isOpen = false; this.focusTrap(); } } focusCatch(e) { const focusable = this.modalContainer.querySelectorAll(this.focusElements); const focusArray = Array.prototype.slice.call(focusable); const focusedIndex = focusArray.indexOf(document.activeElement); if (e.shiftKey && focusedIndex === 0) { focusArray[focusArray.length - 1].focus(); e.preventDefault(); } if (!e.shiftKey && focusedIndex === focusArray.length - 1) { focusArray[0].focus(); e.preventDefault(); } } focusTrap() { const focusable = this.modalContainer.querySelectorAll(this.focusElements); if (this.isOpen) { focusable[0].focus(); } else { this.previousActiveElement.focus(); } } disableScroll() { let pagePosition = window.scrollY; this.lockPadding(); document.body.classList.add('disable-scroll'); document.body.dataset.position = pagePosition; document.body.style.top = -pagePosition + 'px'; } enableScroll() { let pagePosition = parseInt(document.body.dataset.position, 10); this.unlockPadding(); document.body.style.top = 'auto'; document.body.classList.remove('disable-scroll'); window.scroll({ top: pagePosition, left: 0 }); document.body.removeAttribute('data-position'); } lockPadding() { let paddingOffset = window.innerWidth - document.body.offsetWidth + 'px'; this.fixBlocks.forEach((el) => { el.style.paddingRight = paddingOffset; }); document.body.style.paddingRight = paddingOffset; } unlockPadding() { this.fixBlocks.forEach((el) => { el.style.paddingRight = '0px'; }); document.body.style.paddingRight = '0px'; } } const modal = new Modal({ isOpen: (modal) => { console.log(modal); console.log('opened'); }, isClose: () => { console.log('closed'); }, });  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept