时间戳

首页 > 解决方案 > 从一个页面获取元素并使用 JS 将其添加到另一个页面

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

问题描述

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

我有许多要转移到另一个页面的块。应在单击其中一个块（而不是称为“横幅”的块）时进行传输，并且它们应显示为好像是滑块（单击的元素应显示在中心，其他应显示在隐藏/半隐藏）。

例如，如果我点击绿色块，我应该被重定向到第二页（称为“画廊”），在那里我应该看到中间的绿色块（被其他块包围，但现在还为时过早， 我认为）。

我离目标还有很长的路要走，但我一直坚持获取我点击的块并将其转移到另一个页面的概念。你能帮帮我吗？

对不起代码，它真的只是一个试用版，我只是想先掌握这个概念。

'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>

标签： javascripthtmlcss

解决方案

在使用 Firefox 69.0 进行了几次尝试之后（并且得到了 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>

推荐阅读