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

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

转载作者：太空宇宙更新时间：2023-11-04 05:55:23

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

我有一些 block 要转移到另一个页面。转移应该在点击这些 block 之一(而不是所谓的“横幅”)时进行，并且它们应该显示为好像它是一个 slider (被点击的元素应该显示在中心，其他应该是隐藏/半隐藏)。

例如，如果我点击绿色 block ，我应该被重定向到第二页(称为“画廊”)并且我应该在中间看到绿色 block (被其他 block 包围，但它太我认为这还早)。

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

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

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

最佳答案

在尝试使用 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>

关于javascript - 从一个页面获取元素并使用JS将其添加到另一个页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57869832/

文章推荐： javascript - Slick Slider fade true 不适用于垂直 slider

文章推荐： python - SAML AuthnRequest 的 XML 命名空间重要吗？

文章推荐： python - DataFrame.to_dict() 并不总是可逆的

文章推荐： jquery - 如何使用第一个类型

c# - 异步任务获取 VS HttpResponseMessage 获取
我需要您在以下方面提供帮助。近一个月来，我一直在阅读有关任务和异步的内容。我想尝试在一个简单的 wep api 项目中实现我新获得的知识。我有以下方法，并且它们都按预期工作: public Htt
java - 无法从 URL 获取 URI，获取 null？
我的可执行 jar 中有一个模板文件 (.xls)。不需要在运行时我需要为这个文件创建 100 多个副本(稍后将唯一地附加)。用于获取 jar 文件中的资源 (template.xls)。我正在使用
javascript - Backbone 的模型原型(prototype)获取 vs backbone 获取
我在查看网站的模型代码时对原型(prototype)有疑问。我知道这对 Javascript 中的继承很有用。在这个例子中... define([], function () { "use
javascript - 获取 scrollTop、获取 offsetHeight 和 getStyle 需要很长时间
影响我性能的前三项操作是: 获取滚动条获取偏移高度 Ext.getStyle 为了解释我的应用程序中发生了什么:我有一个网格，其中有一列在每个单元格中呈现网格。当我几乎对网格的内容做任何事情时，它运
javascript - 获取 URL 参数函数，获取 url 部分的值，或者如果存在但没有值则返回 true？
我正在使用以下函数来获取 URL 参数。 function gup(name, url) { name = name.replace(/[\[]/, '\\\[').replace(/[\]]/,
c - MacOS 使用 sysctl() 获取 HW_MACHINE_ARCH 获取 "no such file or directory"
我最近一直在使用 sysctl 来做很多事情，现在我使用 HW_MACHINE_ARCH 变量。我正在使用以下代码。请注意，当我尝试获取其他变量 HW_MACHINE 时，此代码可以完美运行。我还认为
ios - 将我的 YouTube channel 获取(获取)到我的 iOS 应用程序中
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。关闭 9 年前。要求提供代码的问题必须表现出对所解决问题的最低限度的理解。包括尝试过的解决方案、为什么
javascript - webpack:如何从 "bower_components"获取 JavaScript，而不是从 "node_modules"获取 JavaScript
由于使用 main-bower-files 作为使用 Gulp 的编译任务的一部分，我无法使用 node_modules 中的 webpack 来require 模块code> dir 因为我会弄乱当
Javascript - 从 "Monday"获取 "mon"或从 "Tuesday"获取 "tue"等
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 5 年前。 Improve this qu
Java:无法将 Gridlayout 应用于 Jscrollpane。获取获取 java.lang.ClassCastException
我使用 Gridlayout 在一行中放置 4 个元素。首先，我有一个 JPanel，一切正常。对于行数变大并且我必须能够向下滚动的情况，我对其进行了一些更改。现在我的 JPanel 上添加了一个 J
python - 如何从 key BlockDeviceMappings 获取 VolumeId(boto3 获取 ec2 的卷信息)
由于以下原因，我想将 VolumeId 的值保存在变量中: #!/usr/bin/env python import boto3 import json import argparse import
angularjs - 未使用 acquireTokensilent 获取 token ，但使用 acquireTokenpopup Msal-browser 获取 token
我正在将 MSAL 版本 1.x 更新为 MSAL-browser 的 Angular 。所以我正在尝试从版本 1.x 迁移到 2.X.I 能够成功替换代码并且工作正常。但是我遇到了 acquireT
python - 使用 GroupBy 获取 Pandas 的平均值 - 获取 DataError : No numeric types to aggregate -
我知道有很多关于此的问题，例如 Getting daily averages with pandas和 How get monthly mean in pandas using groupby但我遇到
javascript - 无法在 mvc 获取 Controller 方法(来自 Uri())中从 QueryString 获取 DATETIME
This is the query string that I am receiving in URL. Output url: /demo/analysis/test?startDate=Sat+
ubuntu - 从 OpenLayer 3 获取 Geoserver 获取 '500 (Internal Server Error)'
我正在尝试使用 javascript 中的以下代码访问 Geoserver 层 var gkvrtWmsSource =new ol.source.ImageWMS({ u
javascript - 使用 XMLHttpRequest 获取 Ecobee API 信息。获取 500(错误 1 : "Authentication failed. Token is required.")
API 需要一个包含授权代码的 header 。这就是我到目前为止所拥有的: var fullUrl = 'https://api.ecobee.com/1/thermostat?json=\{"s
c# - 获取/删除文件的最后一个字符而不加载到内存中
如何获取文件中的最后一个字符，如果是某个字符，则删除它而不将整个文件加载到内存中？这就是我目前所拥有的。 using (var fileStream = new FileStream("file.t
JSP 获取/设置整个对象的参数
我是这个社区的新手，想出了我的第一个问题。我正在使用 JSP，我成功地创建了 JSP-Sites，它正在使用jsp:setParameter 和 jsp:getParameter 具有单个字符串。
multithreading - 获取/释放语义
在回答 StoreStore reordering happens when compiling C++ for x86 @Peter Cordes 写过 For Acquire/Release se
javascript - 获取 .on 中使用的函数的结果
我有一个函数，我们将其命名为 X1，它返回变量 Y。该函数在操作 .on("focusout", X1) 中使用。如何获取变量Y？执行.on后X1的结果？最佳答案您可以更改 Y 的范围以使其位于函

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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