“iframe”是一个HTML元素，它在文档中创建“内嵌框架”，允许在同一页面中显示单独的文档。
Iphone 中的 Stripe 3d 安全身份验证流程重定向失败
与 Stripe 合作，我实现了他们的 3d 安全身份验证流程 - https://docs.stripe.com/ payments/3d-secure/authentication-flow#handle-redirect 我遇到的问题是专门针对 han...
我的 ReactJS 组件包含一个 iframe。为了响应外部页面中的事件，我需要重新加载 iframe。如果用户已导航到 iframe 中的另一个页面，我需要将其重置为 URL
拒绝构建“https://accounts.google.com/”，因为祖先违反了内容安全策略指令“frame-ancestors https://drive.google.com”
Nextjs 客户端从后端接收驱动器共享 URL，我必须将它们显示为嵌入在 nextjs clinet 的 iframe 中。 这是实现的代码 if (file.includes("drive.google.com")) { ...
我已成功上传图片，但无法访问 iframe 中的“完成”按钮。 页面上有多个 iframe，因此我无法使用 cy.iframe()。甚至叫“第n个”
Iframe 弄乱浏览器历史记录 - 将当前页面添加到历史记录中
我的网站上有一些带有 iframe 的产品页面。 iframe 的存在弄乱了浏览器历史记录 - 当前页面被添加到历史堆栈中，当我单击后退时
tinymce 未加载到 iframe chrome 扩展中 - “tinymce 应该已加载到全局范围内”
我正在尝试将tinymce编辑器放置在chrome扩展应用程序的iframe中。但是当我加载应用程序时，tinymce textArea 标记已设置为隐藏，并在控制台中“ti...
我正在尝试截取网页中 iframe 的屏幕截图。 在我的特定情况下，iframe 包含我的一位客户商店的街景视图。 据我搜索和阅读，我没有找到任何
带有 ch-ua-form-factor Cookie 权限的 iframe 错误
我目前在我的网页中使用一个简单的 iframe，使用 bootstrap 来适应小屏幕（=youtube Short）和大屏幕（=普通横向视频）： 我目前在我的网页中使用一个简单的 iframe，使用 bootstrap 来适应小屏幕（=youtube Short）和大屏幕（=普通横向视频）： <div class="container d-none d-md-block" style="max-width:1000px;height:30%;"> <iframe width="1000" height="550" src="https://www.youtube-nocookie.com/embed/0...?&mute=1&autoplay=1&encrypted-media=1" allow="autoplay; fullscreen;"> </iframe> </div> <div class="container .d-block d-md-none" style="width:95%;"> <iframe width="400" height="500" src="https://www.youtube-nocookie.com/embed/G...?&mute=1&autoplay=1&encrypted-media=1" allow="autoplay; fullscreen;"> </iframe> </div> </div> 我收到一条警告/错误消息： 权限策略标头错误：无法识别的功能： “ch-ua-形状因子”。 查了一下，好像和屏幕尺寸有关： https://wicg.github.io/ua-client-hints/ 但是，如果我删除诸如“d-none d-md-block”之类的屏幕尺寸类，仍然会出现相同的消息（可能是由于父屏幕尺寸配置所致）。 除此之外，如果我删除所有 iframe 选项并且使用 www.youtube.com 而不是 www.youtube-nocookie.com.，也会出现错误 如何解决这个问题？ 我在包含嵌入式 YouTube 视频的页面上收到了同样的警告，我更深入地了解了情况，只是发现实际上来自他们这边，因为违反规则的元素位于嵌入内部。 所以我认为忽略警告的建议是最好遵循的。 此错误是指浏览器无法识别的权限策略。当浏览器更新并且现在识别新策略时，可能会发生这种情况。 要解决此问题，您可以在服务器的请求标头中添加权限策略 ch-ua-form-factor 。例如 res.setHeader('Permissions-Policy', 'ch-ua-form-factor'); 作为 YouTube 的临时用户，我也收到同样的 Unrecognized feature: 'ch-ua-form-factor' 错误。我已在 Chrome 114 中尝试使用 MacOS Ventura 13.3.1。我相信这是因为 Chrome 的 User-Agent 减少试用 已经结束，并且 Chrome 版本 113+ 不允许此 Accept-CH 请求。 我在这篇 Chrome 开发者博客文章中看到，Chrome 在 Chrome 89 中开始使用 Sec-CH-UA-Form-Factor。版本 103-112 是弃用试验的一部分，网站可以注册以继续接收完整的 UA 字符串。 YouTube 本身是否需要迁移到用户代理客户端提示 (UA-CH) 规范并发送 Accept-CH: Sec-CH-UA-Form-Factor，而不是尝试获取 CH-UA-Form-Factor？对于用户来说，这尤其令人沮丧，因为台式计算机的外形规格值是空字符串。 请参阅 RFC8942 https://datatracker.ietf.org/doc/html/rfc8942) 和 Web 平台孵化器社区小组的 报告草案。 当前选定的网络直播直播中以及录制内容发布后都会出现此错误。我无法在 Mac 上加载的最新 YouTube 视频位于 here 它会加载到我的 Android 手机上 它不会在 Firefox 113 或 Safari 16.4 中加载，因为 Content Security Policy: Couldn’t process unknown directive ‘require-trusted-types-for’ 会导致 HTTP 401 登录或退出 YouTube/Google 没有帮助 https://developers.google.com/identity/gsi/web/guides/migration [google][1] 这次迁移帮助我消除了这个警告
我通过 iframe 将可信应用程序嵌入到我自己的应用程序中。它适用于大多数部分...但自定义日期选择器不起作用 -> 因为它会按照 https://
如何阻止 iframe 中嵌入的 Dailymotion 视频自动播放？
我正在尝试以某种方式嵌入 Dailymotion 视频（不是我自己的），该方式可以访问 Dailymotion 的新 2021 平台 API，并且加载时不会自动播放。 <p>我正在尝试以一种可以访问 Dailymotion 的新 2021 <a href="https://developers.dailymotion.com/guides/getting-started-with-web-sdk/#embed-methods" rel="nofollow noreferrer">平台 API</a> 的方式嵌入 Dailymotion 视频（不是我自己的），并且加载时不会自动播放。</p> <pre><code><script src="https://geo.dailymotion.com/libs/player.js"></script> <div id="video"></div> <script> dailymotion .createPlayer('video', { video: 'x7tgad0', params: { startTime: 0 }, }) .then((player) => { //log player object to console console.log({player}); //add listener to timechange event from the Dailymotion Platform API player.on(dailymotion.events.VIDEO_TIMECHANGE, (state) => console.log(state.videoTime)); }); </script> </code></pre> <p>JSF 在这里： <a href="https://jsfiddle.net/Esn024/egrLb1tc/12/" rel="nofollow noreferrer">https://jsfiddle.net/Esn024/egrLb1tc/12/</a></p> <p>上面的代码将 <pre><code><div id="video"></div></code></pre> 转换为：</p> <pre><code><div id="video" class="dailymotion-player-root dailymotion-player-default" style="background: rgb(13, 13, 13); padding-bottom: 75%; position: relative;"> <div class="dailymotion-player-wrapper" style="height: 100%; overflow: hidden; position: absolute; width: 100%; margin: 1e-05px;"> <iframe allow="autoplay; fullscreen; picture-in-picture; web-share" class="dailymotion-player" frameborder="0" src="https://geo.dailymotion.com/player.html?video=x7tgad0&amp;startTime=0" title="Dailymotion video player" height="100%" width="100%" style="opacity: 1;"></iframe> </div> </div> </code></pre> <p>它添加了默认自动播放的嵌入式 Dailymotion 视频（注意：正如我发现的，如果将上述代码保存到 .html 文件并通过双击打开它，它不会自动播放，可能是因为浏览器对打开的文件的行为不同来自文件系统，但如果在服务器中打开相同的 .html 文件，它将自动播放）。</p> <p>我想，如果我从 iframe 的“允许”属性中删除“自动播放”，也许我可以阻止它自动播放，基于 6 年前关于他们旧 API 的 StackOverflow 问题<a href="https://stackoverflow.com/questions/48404657/how-can-i-disable-autoplay-video-in-iframe-dailymotion">，所以我将以下代码添加到</a><code>.then()</code><pre>块：</pre> </p><code>const iframeNode = player.getRootNode().childNodes[0].childNodes[0]; iframeNode.setAttribute("allow", "fullscreen; picture-in-picture; web-share"); iframeNode.replaceWith(iframeNode); console.log({iframeNode}); </code><pre> </pre>修改了“允许”属性以删除“自动播放”并重新加载视频，但它仍然会自动播放。<p> </p>我还尝试将播放器设置中的<p><code>autostart</code><pre>属性从</pre><code>firstTimeViewable</code><pre>修改为</pre><code>off</code><pre>，但这也不起作用（至少不是我下面尝试的方式，而且我无法理解任何其他方式来更改设置）：</pre> </p><code>player._do_not_use_e5dbad3203d413f04bf4.settings.autostart = 'off'; </code><pre> </pre>我想这与官方文档一致，其中<p>说<a href="https://developers.dailymotion.com/guides/getting-started-with-web-sdk/#getting-started" rel="nofollow noreferrer">一些播放器设置无法在运行时更改：“播放器配置由多个在运行时无法修改或覆盖的设置组成。这些设置可以只能通过 Dailymotion Studio 中的播放器配置器或平台 API 进行更新。”</a> </p>某些其他设置在 <p><code>player</code><pre> 对象中具有可以在事后更改它们的方法，例如 </pre><code>setAspectRatio</code><pre>、</pre><code>setVolume</code><pre> 和其他一些设置 - 但没有 </pre><code>setAutoplay</code><pre>/</pre><code>setAutostart</code><pre>。</pre> </p>Dailymotion 在 2021 年推出了新的播放器嵌入系统，但旧的 API 直到大约一个月前才继续工作。 <p>迁移指南<a href="https://faq.dailymotion.com/hc/en-us/articles/4420076686226-Migrate-to-the-Player-Embed" rel="nofollow noreferrer">似乎说自动播放有3个设置 - “打开”，“关闭”，“firstTimeViewable”，可以从“Dailymotion Studio”中设置（我认为只有付费帐户才可用）。据我所知，他们的在线指南似乎假设嵌入视频的任何人都拥有付费的 Dailymotion 帐户，并且只会嵌入来自自己频道的视频 - 例如请参阅他们的</a>Web SDK 入门<a href="https://developers.dailymotion.com/guides/getting-started-with-web-sdk/#getting-started" rel="nofollow noreferrer">页面，该页面指导用户“创建与您的 Dailymotion 帐户关联并由唯一的播放器 ID 标识的自定义播放器配置”。但似乎这实际上并不是强制性的，因为文档还说“如果玩家 ID 指定不正确或不再存在，配置将回退到默认库配置。”</a> </p>我现在决定的临时解决方案是在视频第一次开始播放时暂停视频（见下文），但我想找到一种方法，在单击之前根本不开始加载视频：<p> </p><code><script src="https://geo.dailymotion.com/libs/player.js"></script> <div id="video"></div> <script> let pausePlayer = true; dailymotion .createPlayer('video', { video: 'x7tgad0', params: { startTime: 0 }, }) .then((player) => { //log player object to console console.log({player}); //add listener to timechange event from the Dailymotion Platform API player.on(dailymotion.events.VIDEO_TIMECHANGE, (state) => { if (pausePlayer) { player.pause(); pausePlayer = false; } console.log(state.videoTime); }); }); </code><pre> </pre> </question> <answer tick="false" vote="0">受到 elias-berg 上面建议的启发，这里有一个解决方案，它加载预览图像 + 模仿非自动播放 Dailymotion 播放器的按钮： <p>https://jsfiddle.net/Esn024/egrLb1tc/37/<a href="https://jsfiddle.net/Esn024/egrLb1tc/37/" rel="nofollow noreferrer"></a> </p>它可能可以做得更简单，但我只是在视频开始自动播放之前从 Dailymotion 屏幕复制了大部分 HTML 和 CSS（进行了一些更改），然后将其添加到 loadDailymotionPreviewDiv() 函数中，该函数在页面第一次运行时运行负载。<p> </p>当用户单击中间的按钮时，它会触发 loadVideo() 函数，该函数会创建 Dailymotion 播放器，并开始自动播放视频。默认情况下，它开始静音播放，所以我还必须在其中添加一个 <p><code>player.setMute(false);</code><pre>。</pre> </p><code><!DOCTYPE html> <head> <script src="https://geo.dailymotion.com/libs/player.js"></script> <style> .player { display: flex; justify-content: center; width: 480px; height: 360px; background-color: black; position: relative; } .gradient { position: absolute; transition: opacity 200ms ease-in-out; pointer-events: none; background: linear-gradient(180deg,rgba(13,13,13,.6)0,rgba(13,13,13,.2) 20%,rgba(13,13,13,.2) 80%,rgba(13,13,13,.6) 100%); left: 0; bottom: 0; right: 0; top: 0; } .video_poster { height: 100%; width: 100%; position: absolute; background-color: #0d0d0d; } .video_poster_image { object-fit: cover; height: 100%; width: 100%; } .play_screen { height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .layout { display: flex; flex-direction: column; height: 100%; } .layout_top, .layout_bottom { align-items: center; display: flex; flex-direction: row; height: 3rem; height: clamp(48px,3rem,51px); position: relative; z-index: 1; width: 100%; } .layout_top_left { height: 100%; margin: 0 1rem; min-width: 0; } .layout_title { display: block; margin-top: 12px; } .video_title_link { text-decoration: none; } .layout_title .title { color: #fff; font-size: 1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: auto; height: 1.5rem; line-height: 1.5rem; } .video_owner { color: #fff; font-size: .875rem; line-height: 1.25rem; } .video_owner_link { color: #fff; text-decoration: none; } .layout_middle { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-grow: 1; } .play_screen .layout_bottom { justify-content: center; } .button_watch_onsite { align-items: center; background: 0 0; border: 0; border-radius: 1.5rem; color: #fff; cursor: pointer; display: flex; font-weight: 400; height: 2.5rem; padding: 0 0.75rem; } .button_watch_onsite-text { font-size: .875rem; font-style: italic; line-height: 1.5rem; margin-right: 0.375rem; text-transform: lowercase; text-decoration:none; } .button_watch_onsite .brand_wordmark { height: 0.75rem; margin-top: -0.0625rem; } .play_screen_content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; } .button_play { border-radius: 6.25rem; background: 0 0; color: #fff; display: block; cursor: pointer; font-variant-numeric: tabular-nums; padding: 0.125rem; } .button_play_content { background-color: rgba(13,13,13,.6); display: flex; align-items: center; border-radius: 6.25rem; } .button_play_left { display: flex; align-items: center; justify-content: center; height: 64px; width: 64px; } .button_play { border-radius: 6.25rem; background: 0 0; color: #fff; display: block; cursor: pointer; font-variant-numeric: tabular-nums; padding: 0.125rem; } .button_play_right { display: block; line-height: 1; padding-right: 1.5rem; font-size: .875rem; text-transform: uppercase; } </style> </head> <body> <div id="video"></div> <script> const videoId = 'x7tgad0'; const videoDiv = document.getElementById('video'); const loadVideoButton = document.getElementById('loadVideo'); //https://stackoverflow.com/a/61335543/14926023 function secondsToTime(e){ const h = Math.floor(e / 3600).toString().padStart(2,'0'), m = Math.floor(e % 3600 / 60).toString().padStart(2,'0'), s = Math.floor(e % 60).toString().padStart(2,'0'); return h + ':' + m + ':' + s; //return `${h}:${m}:${s}`; } function loadDailymotionPreviewDiv(videoId, videoDiv) { fetch(`https://api.dailymotion.com/video/${videoId}?fields=thumbnail_360_url,title,duration,owner.username`) .then(res => res.json()) .then((json) => { console.log({json}); const imgSrc = json.thumbnail_360_url; const title = json.title; const time = secondsToTime(json.duration); const username = json['owner.username']; const overlayHtml = ` <div class="player"> <div class="video_poster"><img class="video_poster_image" src="${imgSrc}" alt=""></div> <div class="gradient" style="opacity: 1;"></div> <div class="play_screen"> <div class="play_screen_backdrop" role="button" tabindex="0"></div> <div class="layout"> <div class="layout_top"> <div class="layout_top_left"> <div class="layout_title"> <a class="video_title_link" href="https://www.dailymotion.com/video/${videoId}" target="_blank"> <div class="title">${title}</div> </a> </div> <div class="layout_signature"> <div class="video_owner"> <a class="video_owner_link" href="https://www.dailymotion.com/${username}" target="_blank">${username}</a> </div> </div> </div> </div> <div class="layout_middle"></div> <div class="layout_bottom"> <button class="button_watch_onsite" onclick="window.open('https://www.dailymotion.com/video/${videoId}','_blank')" type="button"> <div class="button_watch_onsite-text">Watch on</div> <svg class="brand_wordmark" aria-hidden="true" viewBox="0 0 131 20" xmlns="http://www.w3.org/2000/svg" aria-labelledby="logo-alt-text" role="img"> <title id="logo-alt-text">Dailymotion</title> <path fill="currentColor" d="M26.815 19.657h-2.39l4.53-19.33h2.366l-4.504 19.33h-.002ZM37.933 19.657H29.95L34.513.327h2.39l-4.057 17.166h5.587l-.5 2.164ZM44.193 12.182l-1.725 7.475h-2.42l1.752-7.531-1.333-11.8h2.42l.695 9.42L48.78.326h2.697l-7.285 11.856ZM97.724 2.49H94.22l-3.785 17.167h-2.42L91.8 2.49h-3.837l.53-2.163h9.76l-.529 2.163ZM97.646 19.657h-2.143L99.788.327h2.363l-4.255 19.33h-.25ZM113.266 5.764l-2.113 9.485c-.287 1.343-.688 2.303-1.208 2.987-.791 1.07-2.088 1.591-3.842 1.591-2.893 0-4.551-1.262-4.583-3.426-.01-.63.067-1.206.3-2.246l2.113-9.484c.702-3.21 2.35-4.664 5.216-4.664 2.865 0 4.357 1.316 4.389 3.509.01.63-.066 1.288-.274 2.246h.002v.002Zm-4.226-3.727c-.834 0-1.47.273-1.905.82-.357.44-.54 1.014-.805 2.138l-2.113 9.538c-.131.575-.205 1.123-.2 1.535.017 1.152.777 1.78 2.083 1.78 1.391 0 2.131-.793 2.574-2.767l2.14-9.429c.208-.933.287-1.371.28-1.81-.018-1.18-.75-1.81-2.059-1.81h.002l.003.005ZM53.33.347h4.007l1.1 11.083c.199 2.136.31 3.861.454 6.195h.057a91.22 91.22 0 0 1 2.764-6.195L67.18.347h4.063l-2.17 19.303H66.42l1.384-11.526c.254-2.084.537-3.862.876-5.999l-.057-.029c-.96 2.083-1.807 3.915-2.849 6.028L60.19 19.65h-3.415L55.704 8.124a221.94 221.94 0 0 1-.48-5.999h-.055a129.08 129.08 0 0 1-1.524 5.999L50.542 19.65h-2.68L53.331.347ZM87.087 9.987C85.654 17.4 82.537 20 77.62 20c-3.878 0-6.013-1.66-6.013-5.92 0-1.274.139-2.52.45-4.067C73.547 2.602 76.61 0 81.554 0c3.848 0 6.013 1.66 6.013 5.92 0 1.275-.168 2.52-.478 4.067h-.002Zm-5.845-7.938c-3.202 0-5.364 2.076-6.544 8.02-.31 1.382-.478 2.739-.478 3.847 0 2.875 1.235 4.037 3.68 4.037 3.231 0 5.364-2.075 6.574-8.02.282-1.381.477-2.738.477-3.847 0-2.85-1.234-4.037-3.709-4.037ZM8.49.322c-.458 0-4.464.066-4.464.066L0 19.688h1.898v-.002c1.081-.01 1.482.012 2.539.012 4.936 0 8.061-2.215 9.499-9.604h.002c.31-1.542.48-2.782.48-4.052 0-4.249-2.063-5.72-5.928-5.72Zm3.036 9.765c-1.215 5.925-3.16 7.28-6.404 7.297-1.133.004-1.39-.005-2.25-.018L5.954 2.473v.005c.965-.022 1.193-.032 2.079-.022 2.484.022 3.974.96 3.974 3.8 0 1.104-.196 2.457-.478 3.833l-.002-.002ZM127.766.322l-3.825 17.315L121.1.322h-3.998l-4.348 19.342h2.514l3.823-17.612 2.818 17.612h3.957L130.189.322h-2.423ZM20.728.328l-7.953 19.33h2.557l1.447-3.613.918-2.244.324-.867h2.682l-.086.867-.196 2.246-.277 3.614h2.42l1.5-19.333h-3.338.002ZM18.87 10.661l3.08-8.579-1.014 8.579H18.87Z"></path> </svg> </button> </div> </div> <div class="play_screen_content"> <button class="button_play" aria-label="Playback, ${time}"> <span class="button_play_content"> <span class="button_play_left" style="padding: 8px;"> <svg viewBox="0 0 24 24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"> <path d="M8.56047 5.09337C8.34001 4.9668 8.07015 4.96875 7.85254 5.10019C7.63398 5.23162 7.5 5.47113 7.5 5.73011L7.5 18.2698C7.5 18.5298 7.63398 18.7693 7.85254 18.9007C7.96372 18.9669 8.0882 19 8.21268 19C8.33241 19 8.45309 18.9688 8.56047 18.9075L18.1351 12.6377C18.3603 12.5082 18.5 12.2648 18.5 12C18.5 11.7361 18.3603 11.4917 18.1351 11.3632L8.56047 5.09337Z" fill="currentColor"></path> </svg> </span> <span class="button_play_right">${time}</span> </span> </button> </div> </div> </div>`; videoDiv.innerHTML = overlayHtml; const playContentButton = document.querySelector('#video .button_play'); playContentButton.addEventListener('click', () => { loadVideo(videoId, videoDiv); }); }); } function loadVideo(videoId) { dailymotion .createPlayer('video', { video: videoId, params: { startTime: 0 }, }) .then((player) => { console.log({player}); player.setMute(false); player.on(dailymotion.events.VIDEO_TIMECHANGE, (state) => {console.log(state.videoTime);}); }); } loadDailymotionPreviewDiv(videoId, videoDiv); </script> </body> </html> </code><pre> </pre> </answer></body>
Authorize.net Iframe 未在我的网站中呈现
我已经在我的网站中实现了授权.net iframe，但我遇到了这个问题 CSP错误 帮助我找到渲染 iframe 的解决方案。早些时候，它无需任何更改即可运行。我认为它来自
在移动设备上的 iframe 中丢失 iOS 上的 localStorage 数据
我们正在与网页A（domainA.com）集成并在iframe中加载我们的网页B（domainB.com）。在webpageA中，我们将一些数据存储在localStorage中。 当我...
我正在尝试从 iframe （跨源）内滚动父级。我找到了 iframe resizer（作者 David j. Bradshaw），它应该能够完成此任务（我正在使用 resizer，因为我也
iFrame 页面重新加载时 iframe-resizer 发生变化
我使用以下库 https://iframe-resizer.com/ ，它可以在源页面之后调整跨站点 iFrame 的大小。 虽然我遇到了以下问题但我无法解决： 当第一次
我有两个网站 example.com 和 example.tech 我想将 example.tech 的页面嵌入到 example.com 我已经使用 iframe 嵌入了它，但问题是 iframe 的高度不是自动的。我...
如何在 div 容器内插入 iframe，使得嵌入的 iframe 内容永远不会有滚动条（嵌入的内容从来都不是很宽，但通常足够高，足以导致......
我已将 iframe 包含到其他网页，如下所示 window.addEventListener("message", function(e){var $iframe=document.getElementById("my-iframe"); var eventNam...</desc> <question vote="0"> <p>我已将 iframe 包含到其他网页，如下所示</p> <pre><code><script type="text/javascript">window.addEventListener("message", function(e){var $iframe=document.getElementById("my-iframe"); var eventName=e.data[0]; var data=e.data[1];switch(eventName){case "setHeight": $iframe.height=parseInt(data); break; case "scrollToTop": $iframe.scrollIntoView(); break;}}, false); </script> <div style="width:100%; text-align:left;" > <iframe src="http://mywebpage.com/list?mode=iframe" frameborder="0" height="1000" width="100%" vspace="0" hspace="0" marginheight="5" marginwidth="5" scrolling="no" allowtransparency="true" id="my-iframe"></iframe> </div> </code></pre> <p>我在 iframe 页面中有三个选项卡，第一个选项卡包含内容不长的数据，但第三个选项卡包含长内容。 当我打开第三个选项卡时，iframe 高度不会增加。首次加载时，iframe 高度保持不变，其余页面的内容将被隐藏。 我怎样才能解决这个问题 ？ 我已经使用 TBHTML 选项卡进行选项卡渲染，如下所示。</p> <pre><code>echo TbHtml::tabbableTabs($tabs); </code></pre> </question> <answer tick="false" vote="1"> <p>你可以使用 iframe-resizer jquery 插件来解决这个问题</p> <p><a href="https://iframe-resizer.com/" rel="nofollow noreferrer">https://iframe-resizer.com/</a></p> <p>示例</p> <p><a href="https://iframe-resizer.com/examples/" rel="nofollow noreferrer">https://iframe-resizer.com/examples/</a></p> </answer> <answer tick="false" vote="0"> <p>为此，您可以使用以下代码</p> <pre><code>document.getElementById("my-iframe").height = (document.getElementById('my-iframe').contentWindow.document.body.scrollHeight) + 'px'; </code></pre> </answer> </body></html>
//任意设置为 100% w/h //我希望加载的 PDF 长度超过屏幕的 100% 时滚动 ...
这是我的 javascript 来调整 iframe 大小并需要一些编辑
这是我的 iframe，它位于带有按钮的 div 内 函数 myFunction() { var url =document.getElementById("myFrame").getAttribute("src"); var newUrl = url.substring(0,url.indexOf(...