[英]Get element from one page and add it to another using 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>
经过几次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>
如何使用 JS 和 Ajax 将特定元素从一个页面获取到另一个页面？
[英]How to get a specific element from a page to another using JS and Ajax?
Javascript：我可以使用 JS 将 HTML 元素从一页复制到另一页吗？
[英]Javascript: Can I Use JS to Copy an HTML Element From One Page to Another?
使用 JS 从另一个页面更改主页上 div 元素的内容
[英]Changing content of div element on main page, from another page using JS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.