Question

我正在尝试执行以下操作：

我有许多要转移到另一页的块。单击这些块之一（而不是称为“横幅”的块）时，应进行转移，并且应将其显示为好像是滑块（应将被单击的元素显示在中间，其他应显示为隐藏/半隐藏）。

例如，如果我单击绿色块，则应将我重定向到第二页（称为“图库”），在那里我应该看到中间的绿色块（被其他块包围，但也是如此）我认为这是很早的事情。

我距离目标还有很长的路要走，但是我陷入了让我点击块并将其转移到另一页的想法。你能帮我吗？

对不起，代码，它实际上只是一个试用版，我只是想首先理解这个概念。

'use strict';

let smallBlocks = document.querySelectorAll('.small-blocks__block');
let navBack = document.querySelector('.small-blocks__arrows--back');
let navForward = document.querySelector('.small-blocks__arrows--forward');
let colors = ['pink','yellow','green','grey','purple','black'];
let element;

let onClickBlock = function (evt) {
	element = evt.currentTarget;
	window.open('gallery.html', '_blank');
}

smallBlocks.forEach(function (element) {
	element.addEventListener('click', onClickBlock);
});
sessionStorage.setItem('clickedElement', element);
document.querySelector('.main').insertAdjacentHTML('beforebegin', sessionStorage.getItem(element));

body {
	margin: 0;
	padding: 0;
}

.visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  white-space: nowrap;

  -webkit-clip-path: inset(100%);

          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.wrapper {
	width: 90%;
	padding-left: 5%;
	padding-right: 5%;
	margin: 0 auto;
}

.banner {
	width: 80%;
	margin: 0 auto;
	height: 300px;
	margin-bottom: 100px;

	background: blue;
}

.small-blocks {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 80%;
	margin: 0 auto;
}

.small-blocks__block {
	width: 320px;
	margin-bottom: 50px;
}

.small-blocks__block--image {
	width: 320px;
	height: 150px;
}

.small-blocks__block--image-black,
.small-blocks-gallery__block--image-black {
	background: black;
}
.small-blocks__block--image-yellow,
.small-blocks-gallery__block--image-yellow {
	background: yellow;
}
.small-blocks__block--image-green,
.small-blocks-gallery__block--image-green {
	background: green;
}
.small-blocks__block--image-purple,
.small-blocks-gallery__block--image-purple {
	background: purple;
}
.small-blocks__block--image-pink,
.small-blocks-gallery__block--image-pink {
	background: pink;
}
.small-blocks__block--image-grey,
.small-blocks-gallery__block--image-grey {
	background: grey;
}

.small-blocks__block--description {
	font-weight: bold;
	font-size: 24px;
	line-height: 30px;
}

.small-blocks__block--time {
	font-size: 18px;
	line-height: 24px;
}

.hidden {
	display: none;
}



/*GALLERY*/

.main {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	width: 800px;
	height: 600px;
}


.small-blocks-gallery {
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	width: 8000px;
	margin: 0 auto;
}

.small-blocks-gallery__block {
	width: 600px;
	margin-bottom: 50px;
	height: 400px;
}

.small-blocks-gallery__block--image {
	width: 500px;
	height: 300px;
}

.small-blocks-gallery__block--description {
	width: 500px;
	font-weight: bold;
	font-size: 24px;
	line-height: 30px;
}

.small-blocks-gallery__nav {
	position: absolute;
	top: 40%;
	width: 800px;
}

.small-blocks-gallery__nav-arrows {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.small-blocks-gallery__nav-arrows--back {
	border: none;
	background: transparent;
	font-size: 40px;
}

.small-blocks-gallery__nav-arrows--forward {
	border: none;
	background: transparent;
	font-size: 40px;
}

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <header class="header page-header">
      <h1 class="visually-hidden">Фотогалерея</h1>
    </header>
    <main>
      <div class="wrapper">
        <section class="banner">
          <h2 class="visually-hidden">Баннер</h2>
        </section>
        <section class="small-blocks">
          <h3 class="visually-hidden">Маленькие блоки</h3>
          <div class="small-blocks__block">
            <div class="small-blocks__block--image small-blocks__block--image-black"></div>
            <p class="small-blocks__block--description">Большой заголовок статьи, очень длинный и явно не короткий</p>
            <span class="small-blocks__block--time">10 march 2019</span>
          </div>
          <div class="small-blocks__block">
            <div class="small-blocks__block--image small-blocks__block--image-yellow"></div>
            <p class="small-blocks__block--description">Большой заголовок статьи, очень длинный и явно не</p>
            <span class="small-blocks__block--time">10 march 2019</span>
          </div>
          <div class="small-blocks__block">
            <div class="small-blocks__block--image small-blocks__block--image-green"></div>
            <p class="small-blocks__block--description">Большой заголовок статьи, очень длинный и явно</p>
            <span class="small-blocks__block--time">10 march 2019</span>
          </div>
          <div class="small-blocks__block">
            <div class="small-blocks__block--image small-blocks__block--image-purple"></div>
            <p class="small-blocks__block--description">Большой заголовок статьи, очень длинный и</p>
            <span class="small-blocks__block--time">10 march 2019</span>
          </div>
          <div class="small-blocks__block">
            <div class="small-blocks__block--image small-blocks__block--image-pink"></div>
            <p class="small-blocks__block--description">Большой заголовок статьи, очень длинный</p>
            <span class="small-blocks__block--time">10 march 2019</span>
          </div>
          <div class="small-blocks__block">
            <div class="small-blocks__block--image small-blocks__block--image-grey"></div>
            <p class="small-blocks__block--description">Большой заголовок статьи, очень</p>
            <span class="small-blocks__block--time">10 march 2019</span>
          </div>
        </section>
    </main>
    <footer class="footer page-footer">
    </footer>
    <script src="script.js"></script>
  </body>
</html>
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Gallery Test</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <header class="header page-header">
    </header>
    <main class="main">
      <section class="small-blocks-gallery">
        <h3 class="visually-hidden">Маленькие блоки</h3>
        <div class="small-blocks-gallery__block">
          <div class="small-blocks-gallery__block--image small-blocks-gallery__block--image-black"></div>
          <p class="small-blocks-gallery__block--description"></p>
        </div>
        <div class="small-blocks-gallery__block">
          <div class="small-blocks-gallery__block--image small-blocks-gallery__block--image-yellow"></div>
          <p class="small-blocks-gallery__block--description"></p>
        </div>
        <div class="small-blocks-gallery__block">
          <div class="small-blocks-gallery__block--image small-blocks-gallery__block--image-green"></div>
          <p class="small-blocks-gallery__block--description"></p>
        </div>
        <div class="small-blocks-gallery__block">
          <div class="small-blocks-gallery__block--image small-blocks-gallery__block--image-purple"></div>
          <p class="small-blocks-gallery__block--description"></p>
        </div>
        <div class="small-blocks-gallery__block">
          <div class="small-blocks-gallery__block--image small-blocks-gallery__block--image-pink"></div>
          <p class="small-blocks-gallery__block--description"></p>
        </div>
        <div class="small-blocks-gallery__block">
          <div class="small-blocks-gallery__block--image small-blocks-gallery__block--image-grey"></div>
          <p class="small-blocks-gallery__block--description"></p>
        </div>
        <div class="small-blocks-gallery__nav">
          <div class ="small-blocks-gallery__nav-arrows">
            <button class="small-blocks-gallery__nav-arrows--back" type="button"> < </button>
            <button class="small-blocks-gallery__nav-arrows--forward" type="button"> > </button>
          </div>
        </div>
      </section>
    </main>
    <footer class="footer page-footer">
    </footer>
    <script src="script.js"></script>
  </body>
</html>

Answer 1

在尝试使用Firefox 69.0（并得到an SO answer的帮助）后，我注意到：

主页和弹出窗口应位于必须允许跨域访问的地方（本地文件将不起作用）
突出显示元素的调用必须从打开的弹出窗口中触发
应放置一个依赖于setTimeOut()的循环，以确保弹出窗口元素已完全加载。这听起来有些怪异，因为即使触发了onload事件，window.document.getElementById方法也可能不可用（实际上调用会成功，但是在浏览器控制台中会出现错误），至少适用于Firefox 69.0）

您将在下面的工作示例中找到

：

主页。步骤已注释。

<html>
    <head>
        <script type="text/javascript">
            var popup = null;
            function highlightPopupElement(popupDocument) {

                // Checks if the popup is fully loaded. If not,
                // the function sets a timeout call to itself and exits.
                if (!popupDocument.getElementById) {
                    setTimeout(function() {highlightPopupElement(popupDocument)}, 100);
                    return;
                }

                // Retrieves the element to highlight
                elemToHighLight = popupDocument.getElementById('to-highlight');
                if (!elemToHighLight) {
                    console.log("Error: element to highlight not found");
                    return;
                }

                // Highlighting
                elemToHighLight.className="highlighted";

            }

            // Function called by the button click
            function loadAndHighlight() {
                popup = window.open('gallery.html', 'showtime');
            }
        </script>
    </head>
    <body>
        <!-- Click the button to load the popup and highlight an element -->
        <button onclick="loadAndHighlight()">Showtime</button>
    </body>
</head>

弹出页面，非常简单。第二项突出显示（背景为蓝色）。您可以看到，在弹出窗口中调用了主页中定义的突出显示功能，并且该页面的页面完全加载之后。

<html>
    <head>
        <style>
            li.highlighted {background-color:c0c0f0;}
        </style>
        <script type="text/javascript">         
            function loaded() {
               window.opener.highlightPopupElement(document);
            }
        </script>
    </head>
    <body onload="loaded()">
        <ul>
            <li>Not Highlighted</li>
            <li id="to-highlight">Highlighted :-)</li>
            <li>Not Highlighted</li>
        </ul>
    </body>
</head>

使用JS从一页获取元素并将其添加到另一页

1 个答案: