“iframe”是一个HTML元素，它在文档中创建“内嵌框架”，允许在同一页面中显示单独的文档。
我正在尝试创建一个与 Wistia 类似的布局 https://home.wistia.com/live/events/pnd98h7ffa?utm_campaign=2023%20Webinar%20Series&utm_medium=email&_hsmi=265945727&_hsenc=p...
我有一个页面https://www.visitmontaione.com/wp4/en/montaione-tuscany-italy/services/，其中嵌入了iframe，但它不可点击。 我不明白为什么。也许有一些脚本...
Youtube - 如何在嵌入链接中强制使用 480p 视频质量 / <iframe>
如何强制 iframe Youtube 视频的 480p 视频质量？ 示例代码： </</desc> <question vote="48"> <p>如何为 iframed Youtube 视频强制使用 480p 视频质量？</p> <p>示例代码：</p> <pre><code><iframe width="560" height="315" src="http://www.youtube.com/embed/FqRgAs0SOpU" frameborder="0" allowfullscreen></iframe> </code></pre> </question> <answer tick="false" vote="75"> <p>将以下参数附加到 Youtube-URL：</p> <p>144p：&vq=小<br/> 240p：&vq=小<br/> 360p：&vq=中 <br/> 480p：<strong>&vq=大</strong> <br/> 720p：&vq=hd720 <br/></p> <p>例如：</p> <pre><code>src="http://www.youtube.com/watch?v=oDOXeO9fAg4" </code></pre> <p>变成：</p> <pre><code>src="http://www.youtube.com/watch?v=oDOXeO9fAg4&vq=large" </code></pre> </answer> <answer tick="false" vote="6"> <p>您还可以使用 1080 高清值：</p> <p>240p：&vq=小、360p：&vq=中、480p：&vq=大、720p：&vq=hd720、<strong>&vq=hd1080</strong></p> </answer> <answer tick="false" vote="2"> <p>我发现，截至 2012 年 5 月，如果您设置帧大小，使最小像素区域（宽度 • 高度）高于特定阈值，则质量会从 360p 提升到 480p（如果您的视频为至少 640 x 360。</p> <p>我发现将嵌入帧的帧大小设置为 <strong>780</strong> x 480 会触发 480p 质量，而不会扭曲视频（按比例放大）。 640 x <strong>585</strong> 也以这种方式工作。我还使用了 <pre><code>&hd=1</code></pre> 参数，但如果您的视频不是以高清（720p 或更高）上传，我怀疑这是否有太大的控制作用。</p> <p>例如：</p> <pre><code><iframe width="780" height="480" src="http://www.youtube.com/embed/[VIDEO-ID]?rel=0&fs=1&showinfo=0&autohide=1&hd=1"></iframe> </code></pre> <p>当然，缺点是通过设置这些静态框架尺寸，您很可能会在侧面或上方和下方看到黑条，具体取决于您的喜好。</p> <p>如果您不关心控件被截断，您可以继续使用 CSS 和 <pre><code>overflow: hidden</code></pre> 将黑条从框架中裁剪出来，前提是您知道视频的确切尺寸。</p> <p>希望这有帮助，并希望嵌入方法很快有一天再次获得离散质量参数！</p> </answer> <answer tick="false" vote="1"> <p>您可以使用 <a href="https://developers.google.com/youtube/js_api_reference" rel="nofollow">YouTube JavaScript 播放器 API</a>，它本身具有设置播放质量的功能。 </p> <pre><code>player.setPlaybackQuality(suggestedQuality:String):Void </code></pre> <blockquote> <p>此功能设置当前视频的建议视频质量。该函数使视频以新质量在当前位置重新加载。如果播放质量确实发生变化，则只会针对正在播放的视频发生变化。调用此函数并不能保证播放质量实际上会改变。但是，如果播放质量确实发生变化，则会触发 onPlaybackQualityChange 事件，并且您的代码应该响应该事件，而不是调用 setPlaybackQuality 函数。 <a href="https://developers.google.com/youtube/js_api_reference#Playback_quality" rel="nofollow">[来源]</a></p> </blockquote> </answer> <answer tick="false" vote="0"> <p>有关此主题的一些更新信息</p> <p><a href="https://developers.google.com/youtube/player_parameters" rel="nofollow noreferrer">https://developers.google.com/youtube/player_parameters</a></p> <p><strong>启用jsapi</strong> 将该参数的值设置为 1 可以通过 IFrame Player API 调用来控制播放器。默认值为 0，这意味着无法使用该 API 控制播放器。</p> <p>...?rel=0&vq=large&enablejsapi=1</p> </answer> <answer tick="false" vote="-2"> <p>您可以使用<pre><code>fmt=</code></pre>参数并根据下表填写值：</p> <p><a href="http://en.wikipedia.org/wiki/YouTube#Quality_and_codecs" rel="nofollow">http://en.wikipedia.org/wiki/YouTube#Quality_and_codecs</a></p> <p>例如：您的网址将变为：</p> <pre><code>http://www.youtube.com/embed/FqRgAs0SOpU?fmt=35 </code></pre> </answer> </body></html>
Twitter 时间轴嵌入无法通过 iframe 正确显示最近的推文。我该如何解决这个问题？
我希望您能帮助我解决我一直面临的问题。 几周前，我网站上嵌入的 Twitter 时间线停止工作。几天前它又开始工作了，但现在小部件
Google 地图嵌入 Iframe 无法正常工作？ 2023
嵌入内容未显示虚拟游览，而是显示整个世界的地图。此问题于 2023 年 11 月 10 日开始，任何人都可以给我任何更新吗？ 点击查看
我的 iframe 有问题！如何让iframe的内容填满屏幕？ 先感谢您。 相片： 电流输出 想要的输出 我的 iframe 有问题！如何让iframe的内容填满屏幕？ 提前谢谢您。 照片： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <iframe src="http://octopi/webcam/?action=stream" style="position:absolute; width:100%; height:100%; overflow:hidden"> Your browser doesn't support iframes </iframe> </div> </body> </html> iframe 的这个样式代码怎么样： iframe{ width:100%; height:100vh; overflow:hidden; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <iframe src="https://www.youtube.com/embed/qL-ry_tz6V0" style="width:100%; height:100vh; overflow:hidden"> Your browser doesn't support iframes </iframe> </div> </body> </html> 你可以使用这个：高度：100vh 首先为所有使用margin: 0; padding: 0;通用选择器设置*{}，以便所有内容都适合屏幕。 注意：这是重置CSS代码，如果不小心处理，可能会影响其他设计 然后为 iframe 设置 width:100%; height:100vh; overflow:hidden。 这里vh表示视图高度 将 border: 0 solid transparent; 设置为 iframe 以删除边框。 注意：如果你想保留边框，请使用CSS的calc()函数从宽度和高度中减去边框的厚度 然后你的 iframe 将适合屏幕！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <iframe src="https://www.youtube.com/embed/qL-ry_tz6V0"> Your browser doesn't support iframes </iframe> </div> <style> *{ margin: 0; padding: 0; } iframe{ width:100%; height:100vh; overflow:hidden; border: 0 solid transparent; } </style> </body> </html>
我想自动调整iframe的大小，使其与内容的高度相同我想在页面底部有10px的边距 我想自动调整 iframe 的大小，使其与内容的高度相同我想在页面底部留出 10px 的边距 <!DOCTYPE html> <html lang="nl"> <head> <title>example</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="icon" type="image/x-icon" href="IMAGES/icoon.png" sizes="128x128"> </head> <body> <header class="menubalk"> <div> <div class="logo"> <a href="home.html" target="mainiframe"><img src="IMAGES/logotransparantbovenbalk.png" alt=""></a> </div> </div> <nav class="menu"> <ul class="navigatieknoppen"> <li><a href="offerte.html" target="mainiframe">Offerte aanvragen</a></li> <li><a href="reviews.html" target="mainiframe">Reviews</a></li> <li><a href="galerij.html" target="mainiframe">Galerij</a></li> <li><a href="contact.html" target="mainiframe">Contact</a></li> </ul> </nav> <div class="login"> <span class="loginicoon"><img src="IMAGES/inlogicoon.png" alt="" class="inlogicoon"></span> <a class="loginlink" href="login.html" target="mainiframe"><u>Login</u></a> </div> </header> <iframe src="home.html" name="mainiframe" id="mainiframe"></iframe> <footer> <div class="logofooter"> <img src="IMAGES/logotransparantbovenbalk.png" alt=""> </div> <div class="copyright"> © Rens Ligterink </div> <ul class="contact"> <li>telefoon: <span class="telnummer">0612345678</span></li> <li>e-mail: <a href="mailto:[email protected]" class="mail">[email protected]</a></li> <li>adres: example 2 <br>           1111 ZX new york</li> </ul> </footer> </body> </html> 这是我网站上的 html，我的 iframe 称为 mainiframe 这是CSS，请告诉我该怎么做，我已经尝试了几件事，但没有任何效果，这是我的CSS： /*index.html*/ /*body*/ body { margin: 0; padding: 0; } /*header*/ .menubalk { background-color: #000000; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; } .menu { margin: auto; } /*logo in de bovenbalk*/ .logo img { width: 240px; } /*verschillende paginas excl. login*/ .menu ul { list-style: none; display: flex; padding: 0; margin: auto; } .menu li { margin-right: 80px; } .menu a { text-decoration: none; color: #B9B9B9; font-family: Arial Black, sans-serif; font-size: 18px; } .menu a { margin-top: 10px; } /*login*/ .loginlink { text-decoration: none; color: #B9B9B9; font-family: Arial Black, sans-serif; font-size: 18px; } .loginicoon { font-size: 10px; align-items: center; } .inlogicoon { width: 24px; padding: 5px; } .login { display: flex; float: right; display: flex; align-items: center; text-align: auto; padding: 40px; } /*het iframe waar de pagina's in worden geladen*/ #mainiframe { /*width: 100%;*/ border: none; /*height: 100%;*/ width: 100%; } /*footer*/ footer { background-color: #000000; display: flex; } .logofooter img { float: left; width: 40%; padding-top: 50px; padding-left: 20px; padding-bottom: 70px; } .copyright { vertical-align: bottom; color: #B9B9B9; font-family: Arial Black, sans-serif; font-size: 11px; padding-top: 247px; padding-right: 100px; } .contact { list-style: none; float: right; margin-right: 10px; color: #B9B9B9; font-family: Arial Black, sans-serif; font-size: 18px; padding: 30px; } .telnummer { text-decoration: none; color: #E66C1F; } .mail { color: #4F8BC9; text-decoration: none; } /*algemeen*/ .title li { list-style: none; text-align: center; font-family: Arial Black, sans-serif; font-size: 44px; color: #2FC5EE; border-bottom: solid; border-color: #000000; padding-bottom: 50px; padding-top: 40px; } .title ul { padding: 0; } 将此添加到 <head> <!-- other head elements --> <script> const resizeIframe = () => { const iframe = document.getElementById("mainiframe"); const body = document.body, html = document.documentElement; const height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ); iframe.style.height = height + "px"; }; window.addEventListener("DOMContentLoaded", resizeIframe); window.addEventListener("resize", resizeIframe); </script> </head> 和一些CSS #mainiframe { border: none; width: 100%; margin-bottom: 10px; }
在动态渲染的 iframe 中使用 Apple Pay（同源）
我正在尝试在我创建的 iframe 中使用 Apple Pay，并使用 Javascript 填充其 DOM。 （背景：我从事第三方小部件工作，网站可以将其嵌入到现有网站中，因此......
我尝试使用 iframe 代码将创建的对话框流集成到我的简单 html 中，但是当我尝试在浏览器中打开它时，它显示错误“403。这是一个错误。我们很抱歉，但您确实...
我有一个任务，需要在我的网页上加载 URL（例如 www.yahoo.com）并截取屏幕截图。我使用 html2canvas 进行屏幕截图并将其附加到页面正文。 该页面指定...
我是编程初学者，我正在尝试获取 iframe 中 YouTube 视频的长度（以秒为单位），有人可以帮助我吗？ 这是我的 iframe： <p>我是编程初学者，我正在尝试获取 iframe 中 YouTube 视频的长度（以秒为单位），有人可以帮助我吗？</p> <p>这是我的 iframe：</p> <pre><code><iframe id="youtube-video" height="500" src="https://www.youtube.com/embed/uSkPqgnBmUk?autoplay=1" allow="autoplay"></iframe> </code></pre> <p>我需要它是 JS 中最简单的方法！</p> <p>提前致谢。</p> <p>我试图在网站上找到它，但没有成功。</p> </question> <answer tick="false" vote="0"> <p>不幸的是，不可能以这种方式做你想做的事。但最简单的方法是在这里使用 google API for youtube：<a href="https://developers.google.com/youtube/v3" rel="nofollow noreferrer">https://developers.google.com/youtube/v3</a>.</p> <p>祝你有美好的一天！</p> </answer> </body></html>
我想将带有搜索参数的 pdf url 传递到 html 页面的 iframe。 pdf打开，但搜索部分总是被丢弃，为什么？ [已关闭]
我想将 pdf URL 传递到带有搜索参数的 html 页面的 iframe，如下所示。我的期望是，在 html 端，pdf 打开时会指向第一个搜索结果。但是pdf打开...
React 站点在本地构建中正确重定向到 PDF，但在 Netlify 部署中则不然
我在 React 站点中有以下文件： 索引.tsx 从“反应”导入反应； 从'react-dom/client'导入ReactDOM； 导入 { BrowserRouter as Router, Route, Routes, useNavigate } from "r...
我正在尝试找到一种不使用 iframe 来封装 Javascript 的方法。理想情况下，我想要一种在父页面上加载外部 HTML 组件（小部件）的方法，而不需要两步加载过程，...
如何使用 document.getElementById 在 iframe 中选取元素
我有一个像这样的iframe <html> <head></head> <frameset name="myframe2" cols="0%,...</desc> <question vote="92"> <p>我有一个像这样的<pre><code>iframe</code></pre></p> <pre><code><iframe name="myframe1" id="myframe1" width="100%" height="100%" src="a.html"> <html> <head></head> <frameset name="myframe2" cols="0%, 100%" border="0" frameBorder="0" frameSpacing="0"> <frame name="page1" src="c.html" scrolling="no"></frame> <frame name="page2" src="d.html" > <html> <head></head> <body id="top"> <div id="div1"> <div id="div2"> <div id="div3"> <ul id="x"> <li>a</li> <li>b</li> </ul> </div> </div> </div> </body> </html> </frame> </frameset> </html> </iframe> </code></pre> <p>我想引用元素“x”。我尝试了多种方法，但找不到解决方案。 </p> </question> <answer tick="true" vote="211"> <pre><code>document.getElementById('myframe1').contentWindow.document.getElementById('x') </code></pre> <p><a href="http://jsfiddle.net/qfRYQ/" rel="noreferrer"><strong>小提琴</strong></a></p> <p><a href="http://help.dottoro.com/ljctglqj.php" rel="noreferrer"><pre><code>contentWindow</code></pre></a> 所有浏览器都支持，包括旧版本的 IE。</p> <p>请注意，如果 <pre><code>iframe</code></pre> 的 <pre><code>src</code></pre> 来自其他域，则由于 <a href="http://en.wikipedia.org/wiki/Same_origin_policy" rel="noreferrer">同源策略</a>，您将无法访问其内容。</p> </answer> <answer tick="false" vote="25"> <p>使用 <a href="http://www.w3schools.com/jsref/prop_frame_contentdocument.asp" rel="noreferrer"><pre><code>contentDocument</code></pre></a> 来实现这一点</p> <pre><code>var iframe = document.getElementById('iframeId'); var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document; var ulObj = innerDoc.getElementById("ID_TO_SEARCH"); </code></pre> </answer> <answer tick="false" vote="8"> <p>（这是添加到所选答案中）</p> <p>确保 <pre><code>iframe</code></pre> 在您之前加载</p> <pre><code>contentWindow.document </code></pre> <p>否则，你的<pre><code>getElementById</code></pre>将是<pre><code>null</code></pre>。</p> <p>PS：无法发表评论，评论声誉仍然很低，但这是所选答案的后续，因为我花了一些很好的调试时间试图弄清楚我应该在选择内部之前强制加载<pre><code>iframe</code></pre> -iframe 元素。</p> </answer> <answer tick="false" vote="3"> <p>您需要确保框架已满载 最好的方法是使用 onload:</p> <pre><code><iframe id="nesgt" src="" onload="custom()"></iframe> function custom(){ document.getElementById("nesgt").contentWindow.document; } </code></pre> <p>当 iframe 完全加载时，此功能将自动运行。</p> </answer> <answer tick="false" vote="2"> <p>就我而言，我试图抓取 <strong>pdfTron</strong> 工具栏，但不幸的是，每次刷新页面时，它的 <strong>ID</strong> 都会发生变化。</p> <p>所以，我最终用这句话抓住了它：</p> <p><pre><code>const pdfToolbar = document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById('HeaderItems');</code></pre></p> <p>正如在 tagName 写入的数组中一样，您的应用程序中将始终拥有 iFrame 的固定索引。</p> </answer> <answer tick="false" vote="0"> <p>抱歉，我没有足够的声誉来添加评论，但在这种情况下也许写一个答案是可以的。我一直在寻找更改 Iframe 中某些 html 的 css。我有一个在 iframe 之外工作的书签代码，所以我就快到了：</p> <pre><code>javascript:(function(){ var style = document.createElement('style'), styleContent = document.createTextNode('.notifications-list--cMVsqVbKkaXV4SQ {zoom: 0.8!important;}'); style.appendChild(styleContent); var caput = document.getElementsByTagName('head'); caput[0].appendChild(style); })(); </code></pre> <p>我的 iframe 名为 <pre><code>xm-feed-iframe</code></pre></p> <p>所以我猜你会将代码更改为</p> <pre><code>document.getElementById('xm-feed-iframe').contentWindow.document.getElementById('x') </code></pre> <p>但是我需要使用一个类来更改 css 样式。所以我想这可能就像改变一样简单</p> <pre><code>var caput = document.getElementsByTagName('head') </code></pre> <p>到</p> <pre><code>var caput = document.getElementById('xm-feed-iframe').contentWindow.document.getElementsByTagName('head') </code></pre> <p>所以最终的代码是</p> <pre><code>javascript:(function(){ var style = document.createElement('style'), styleContent = document.createTextNode('.notifications-list--cMVsqVbKkaXV4SQ {zoom: 0.8!important;}'); style.appendChild(styleContent); var caput = document.getElementById('xm-feed-iframe').contentWindow.document.getElementsByTagName('head'); caput[0].appendChild(style); })(); </code></pre> <p>嘿，很快就成功了。我现在可以更深入地研究一下，并希望将一些计数器添加到 iframe 中出现的列表中！ :)</p> <p>任何有关代码的评论将不胜感激，因为我是自学的！</p> <p>希望这对其他人有帮助</p> <p>谢谢</p> <p>更新： 我们在这里 - 我知道有一个使用书签的编号列表。我的生活现在将变得更加轻松，因为我将不再丢失我需要下载的所有项目。 ：D</p> <p><a href="https://i.stack.imgur.com/tDVm0.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3REVm0wLnBuZw==" alt=""/></a></p> </answer> <answer tick="false" vote="0"> <p>我通过使用 .contentDocument 而不是 .contentWindow 解决了这个问题</p> </answer> </body></html>
使用 Three.js 与 Iframe 交互后，网页在移动设备上崩溃
我有一个模态，其中包含一个利用 Three.js 加载 3d 门的 Iframe。 Iframe 在桌面上工作正常，但是，当我们在移动设备上与它交互时，它会崩溃或重新加载页面......
我想使用React js在Iframe中添加pageno，我能做什么
// 如果“图像”可用，则显示另一个带有设置页码选项的 Iframe。 <question vote="0"> <p><pre><code>// If 'image' is available, display another Iframe with the option to set the page number. <Iframe className="iframes" url={</code></pre>${图片}?页=2<pre><code>} // Replace '2' with the desired page number width="100%" type="application/pdf" id="myId" height="500px" display="initial" position="relative" /> // If 'image' is available, display another Iframe with the option to set the page number. <Iframe className="iframes" url={</code></pre>${图片}?页=2<pre><code>} // Replace '2' with the desired page number width="100%" type="application/pdf" id="myId" height="500px" display="initial" position="relative" /></code></pre></p> </question> <answer tick="false" vote="0"> <pre><code>you can use # insted of ? you pdf open for that specific page </code></pre> </answer> </body></html>
如何从 iframe 内部的 Svelte 应用程序访问 iframe 变量？
我有一个 iframe，可以根据请求加载不同的 svelte 应用程序。 我需要从其中加载的 svelte 应用程序访问包含 iframe 的文档中定义的变量。 有没有可能...
拒绝在框架中显示“url”，因为它在 AngularJS 中将“X-Frame-Options”设置为“DENY”
每次我尝试在 iframe 的 src 中提供 html 文件的本地地址时，它都会在控制台中给出错误 错误 拒绝在框架中显示“url”，因为它将“X-Frame-Options”设置为“DENY” 虽然...
背景 我非常熟悉使用 javascript 从网页检索信息。通常我可以使用 window.frames["FrameName"].document.getElementById("ElementID"); ...