Столь удобный может стать кошмаром при отладке.</h1> <nav style="font-size:0.9em;margin:25px 0px 0px 0px;" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="/">Home</a></li> <li class="breadcrumb-item"><a href="/articles/">Публикации</a></li> <li class="breadcrumb-item active" aria-current="page">Столь удобный <iframe>может стать кошмаром при отладке.</li> </ol> </nav> <div class="post-content"> <div style="margin:25px 0px;border 1px solid silver;"> <div id="yandex_rtb_R-A-3179168-1-1"></div> <script> window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ "blockId": "R-A-3179168-1", "renderTo": "yandex_rtb_R-A-3179168-1-1" }) }) </script></div><h3>Красота ‹ iframe ›</h3> <p>То, как мы создаем и проектируем веб-приложения и сайты, сильно изменилось за последнее десятилетие. Сегодняшнему пользователю больше не нужно страдать от ужасного удобства использования веб-сайтов на основе фреймов, где вы могли бы легко часами искать дорогу. К счастью, наборы фреймов — это архаичный макет, который больше не используется. Тем не менее, их преемник, HTML-тег ‹ iframe ›, приобрел большую популярность по целому ряду причин.</p> <p>Встроенный фрейм, или iframe, — это отличный инструмент для встраивания различного контента, такого как видео, социальные сети, карты и т. д., в ваше веб-приложение. Это довольно простой и легкий в освоении тег, который, по сути, позволяет вам показывать посетителям изолированную веб-страницу в пределах основного вида веб-страницы. Так в чем же дело, спросите вы? Ну, есть несколько причин, по которым вы можете их использовать:</p> <div style="margin:25px 0px;border 1px solid silver;"> <div id="yandex_rtb_R-A-3179168-1-2"></div> <script> window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ "blockId": "R-A-3179168-1", "renderTo": "yandex_rtb_R-A-3179168-1-2" }) }) </script></div> <p><strong>Гибкость</strong> — извлекайте любой сторонний (или ваш собственный!) мультимедийный контент и отображайте его на своем веб-сайте, не слишком беспокоясь о базовом коде и стилях. Он легко смешивается с вашей собственной веб-страницей независимо от используемых технологий и правил CSS.</p> <p><strong>Задел на будущее</strong> — ваша собственная веб-страница надежно изолирована от элемента контента, помещенного в iframe. Сторонний поставщик может вносить исправления и обновления, чтобы улучшить удобство использования и внешний вид, и если по какой-либо причине что-то сломается, остальная часть страницы не пострадает.</p> <p><strong>Приятный внешний вид</strong>. Большинство сторонних владельцев сделают все возможное, чтобы упростить интеграцию их контента на ваш сайт. Пользователь не может сказать, что это внешний источник, встроенный в вашу веб-страницу.</p> <p><strong>Время загрузки</strong> — поскольку вы управляете содержимым «iframe» со ссылками на родительской странице, вы также можете определить, когда и в какой последовательности будет загружаться каждый элемент страницы.</p> <h3>Предостережения</h3> <p>Хотя iframes могут быть очень полезными, они также могут причинить боль тем же людям, которые использовали их для встраивания различного контента в веб-приложение. 🙂 Как так?</p> <p>Типичное использование фреймов — это загрузка различных сложных компонентов пользовательского интерфейса, таких как конструкторы пользовательского интерфейса, текстовые редакторы, системы комментариев и интерактивные карты с другого веб-сервера. Их также можно использовать для динамического изменения контента в заданной части страницы. Все это может доставить разработчикам массу проблем, пытаясь воспроизвести то, чему подвергался пользователь и как он взаимодействовал с этим элементом.</p> <p>На ум приходит распространенный сценарий:</p> <ol><li>Посетитель открывает окно чата на странице с ценами, чтобы запросить дополнительную информацию о ваших планах.</li><li>Он печатает свое сообщение, но все, что выходит, искажено. Он пытается закрыть и снова открыть окно чата, но окно зависает.</li><li>Затем он покидает страницу.</li><li>Затем техподдержка/разработчики получают отчет о сбое. Они выясняют, в чем была ошибка, но понятия не имеют, что на самом деле сделал пользователь.</li></ol> <p>Это не всегда ошибки. Возможно, пользователь просто сделал что-то неожиданное на странице, что вы не знаете, как воспроизвести.</p> <p>Существуют различные инструменты отчетов о сбоях, которые регистрируют ошибки, произошедшие в iframe. Что, если бы вы могли получить отчет о сбое вместе с записью действий пользователя, чтобы вы не только видели зарегистрированные сообщения о своих ошибках, но и могли воспроизвести их как «видео» и увидеть, что именно произошло?</p> <div style="margin:25px 0px;border 1px solid silver;"> <div id="yandex_rtb_R-A-3179168-1-3"></div> <script> window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ "blockId": "R-A-3179168-1", "renderTo": "yandex_rtb_R-A-3179168-1-3" }) }) </script></div> <h3>Обходной путь</h3> <p>Существует бесплатный инструмент <a target="_blank" href="https://www.sessionstack.com/">SessionStack</a>, который отслеживает сеансы пользователей вашего веб-приложения. Когда что-то сломается вместе с журналом, вы получите запись сеанса пользователя, которая поможет вам сразу обнаружить ошибку. SessionStack не только обнаруживает тег iframe, но также записывает все действия пользователя внутри iframe и легко воспроизводит их для вас.</p> <p>Ниже приведен снимок проигрывателя SessionStack: слева от каждого снимка экрана вы можете увидеть запись всех действий пользователя вместе с такими подробностями, как невыполненные сетевые запросы, ошибки и отладочные сообщения, а справа SessionStack отображает «видео» взаимодействие, которое происходит.</p> <p><img loading="lazy" src='https://i2.wp.com/miro.medium.com/12HHo55fU_JMiTug5rZr1ow.png' /></p> </div> <div class="row"> <div class="col-sm-6"> <a class="btn btn-primary btn-sm" href="/tag/javascript/">JavaScript</a> <a class="btn btn-primary btn-sm" href="/tag/web-development/">Web Development</a> <a class="btn btn-primary btn-sm" href="/tag/debugging/">Debugging</a> <a class="btn btn-primary btn-sm" href="/tag/ux/">UX</a> <a class="btn btn-primary btn-sm" href="/tag/html5/">Html5</a> </div> <div class="col-sm-6 text-right"> <i style="font-size: 20px;" class="material-icons inline-icon">schedule</i> <span style="font-size:0.9em;">13.10.2023</span> </div> </div> </div> </div> </div> <div id="sidebar-right" class="col-sm-2"> <div class="sidebar-block"> <ul class="related-questions"> <h4>Вопросы по теме</h4> <li><a href="/questions/47786405/">eventReactive с 2 кнопками действий на 2 вкладках</a></li> <li><a href="/questions/56966914/">Добавить результат в TestCaseSource</a></li> <li><a href="/questions/35723895/">три столбца в одну дату</a></li> <li><a href="/questions/53519666/">Как открыть URL-адрес в WebView через .js в создателе кокосов</a></li> <li><a href="/questions/15606161/">Highchart GMT и смещение в один час</a></li> <li><a href="/questions/45790389/">проблема с отключением дат в datepicker</a></li> <li><a href="/questions/51732189/">Получить описание текущего шага, вызываемого из файла BDD</a></li> <li><a href="/questions/48948405/">журнал данных ракетки - журнал данных с отрицанием?</a></li> <li><a href="/questions/44947195/">Не удается проиндексировать массив int RavenDB</a></li> <li><a href="/questions/61860016/">Как использовать команду Scaffold-DbContext в VS Code</a></li> <li><a href="/questions/53848232/">Взрывающийся градиент тензорного потока</a></li> <li><a href="/questions/59817936/">Итерация по столбцу фрейма данных pandas и оценка с помощью оператора if и передача значений столбца в пустой список/словарь</a></li> <li><a href="/questions/65405901/">Заполнить таблицу данных; Неверный ответ JSON</a></li> <li><a href="/questions/1008111/">Получить точное время для удаленного сервера</a></li> <li><a href="/questions/55873717/">Сбор элементов в массиве JSON</a></li> <li><a href="/questions/68400637/">Динамический компонент круговой диаграммы D3 в Angular</a></li> <li><a href="/questions/50366776/">Данные о пользовательских событиях в Firebase Events</a></li> <li><a href="/questions/36395847/">Laravel 5.2 - проблема с веб-сервисами</a></li> <li><a href="/questions/66625884/">Как повернуть трехмерный график в Matplotlib вокруг любой оси</a></li> <li><a href="/questions/26409737/">Представление класса базы данных Java SQL</a></li> </ul> </div> </div> </div> </div> </div> <div id="footer" class="container-fluid"> <div class="row"> <div class="col-sm-2"></div> <div class="col-sm-8"> (c) 2024 - questu.ru <span style="color:silver;"> [<a target="_blank" href="https://questu.ru/bg/">bg</a>, <a target="_blank" href="https://questu.ru/ro/">ro</a>] </span> </div> <div class="col-sm-2 text-center"> <a href="https://www.liveinternet.ru/click" target="_blank"><img id="licnt555B" width="88" height="31" style="border:0" title="LiveInternet" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7" alt=""/></a><script>(function(d,s){d.getElementById("licnt555B").src= "https://counter.yadro.ru/hit?t57.6;r"+escape(d.referrer)+ ((typeof(s)=="undefined")?"":";s"+s.width+""+s.height+"*"+ (s.colorDepth?s.colorDepth:s.pixelDepth))+";u"+escape(d.URL)+ ";h"+escape(d.title.substring(0,150))+";"+Math.random()}) (document,screen)</script> <br><br> </div> </div> </div> </body> </html>