“iframe”是一个HTML元素，它在文档中创建“内嵌框架”，允许在同一页面中显示单独的文档。
stackoverflow 上可爱的人们大家好。 我在 Dreamweaver 中使用 html 和 css 创建网站。 我从电视档案库中获取视频，并使用 iframe 将它们嵌入到我的网站上。它...
我的网页上嵌入了一些来自 YouTube 的视频。问题是我正在使用下面附加的代码来使其响应（通过引导程序）。它在手机和平板电脑上很好用，但在桌面上......
我希望你一切都好。几周来我一直在为我的应用程序开发功能，但我不知道如何解决该问题。 我想做的是：插入任何网站...
有没有办法告诉cefsharp将javascript发送到哪个iframe？
我正在使用 cefsharp 创建自己的应用程序，并使用 ExecuteScriptAsync 将 javascript 发送到正在查看的网站。但是，我遇到了我需要使用的元素嵌套的问题......
<question vote="0"> <pre><code><iframe id="instagramEmbed" src="https://www.instagram.com/reel/C6zTuu3s6MB/embed/" scrolling="no" allowtransparency="true" allowfullscreen="true" frameborder="0" width="300" height="600" play>Iframe not supported</iframe> </code></pre> <p>我想自动播放这个卷轴有办法吗？</p> <p>我尝试将自动播放或类似的东西放入 iframe 中，但它不起作用。</p> </question> <answer tick="false" vote="0"> <p>你可以这样做：</p> <pre><code>document.getElementById("instagramEmbed").onload = function(e) {autoPlay(e)}; </code></pre> <p>然后在自动播放功能中，您可以在带有播放按钮的子元素上添加<pre><code>.click()</code></pre>。</p> </answer> </body></html>
在 HTML 中使用 API - 如何发送 API 数据并在我的 iframe 中显示其响应？
这是我的一个较新的 html 项目中的一段代码： 新标签？ 这是我的一个较新的 html 项目中的一段代码： <form action='https://www.Bing.com/' method='PUT'> <div> <label for='newTab'>New Tab?</label> <input type='checkbox' name='newTab' id='newTab'/> </div> <div> <label for='newTab'>What do you want to search?</label> <input name='/search?q=' id='/search?q=' value='Shopping' /> </div> <div> <button>Search</button> </div> </form> 它应该做的是与 Bing API 交互并返回指定的搜索 - 例如这里我想生成“购物”搜索，我从 Bing API 中获取了两个值 - 'newTab' 值和 '/ search?q' 值来发送信息，但是当我发送信息时，它不是显示带有“购物”的搜索栏，而是显示 Bing 主页。 正如您可能知道的那样，我对使用 API 完全陌生，尤其是在 HTML 中——有人可以帮我调试这个吗？ 假设您的表单位于 iframe 内，这应该可以解决问题。 <form action='https://www.Bing.com/search' method='GET'> <div> <label for='newTab'>New Tab?</label> <input type='checkbox' name='newTab' id='newTab'/> </div> <div> <label for='search'>What do you want to search?</label> <input name='q' id='search' value='Shopping' /> </div> <div> <button>Search</button> </div> </form> 您还可以在这里阅读一些文档：https://www.w3schools.com/tags/att_form_method.asp
如果资源位置被 UseStaticFiles 更改，Iframe 不会显示资源
我想在 Blazor 服务器应用程序中使用 iframe 来显示 PDF 资源。我已经使用 UseStaticFiles 中间件将资源位置提供给 iframe，但它不起作用。 这是代码片段...
我正在动态创建一个 iframe，如下所示： 让代码=“你好世界<\/title><\/head><body><h1>你好世界<\/h1><scri...</desc> <question vote="4"> <p>我正在像这样动态创建一个 iframe：</p> <pre><code>let code = "<html><head><title> hello world <\/title><\/head><body><h1> hello world <\/h1><script>const h1 = document.querySelector('h1'); h1.style.color = 'red'<\/script><\/body><\/html>" const iframe = document.createElement('iframe') document.body.appendChild(iframe) const content = iframe.contentDocument || iframe.contentWindow.document content.open() content.write(code) content.close() </code></pre> <p>然后我将其内容更改为这样：</p> <pre><code>code = "<html><head><title> bye world <\/title><\/head><body><h1> bye world <\/h1><script>const h1 = document.querySelector('h1'); h1.style.color = 'red'<\/script><\/body><\/html>" content.open() content.write(code) content.close() </code></pre> <p>但我收到以下错误：<pre><code>SyntaxError: redeclaration of const h1</code></pre>，因为 JavaScript 被注入到 iframe 中。</p> <p>在向 iframe 写入新代码之前，有什么方法可以清除 iframe 内的全局变量范围吗？我已经尝试过 <pre><code>iframe.contentWindow.location.replace('about:blank')</code></pre> 以及 <pre><code>iframe.src = 'about:blank'</code></pre> 但这并不能清除它的内部 JS 变量范围。 （我也遇到同样的错误）</p> <p>我意识到我可以废弃整个 iframe 并创建一个新的 iframe，但我将每秒更换几次代码，并且我希望有一种成本更低的方法来更新它。</p> </question> <answer tick="false" vote="0"> <p>您可以用花括号 <pre><code>const</code></pre> 将动态 <pre><code>let</code></pre> 变量中的 <pre><code>content</code></pre> 和 <pre><code>{}</code></pre> 声明括起来，创建块作用域。这是解决重新声明错误的简单方法。</p> <pre><code>// Note the added braces {} within the <script> let code = "<html><head><title> hello world <\/title><\/head><body><h1> hello world <\/h1><script>{ const h1 = document.querySelector('h1'); h1.style.color = 'red' }<\/script><\/body><\/html>" </code></pre> <p>可能更好的方法是首先删除 DOM 中已存在的所有 iframe，然后在需要添加内容时重新创建 <pre><code>iframe</code></pre>。</p> <pre><code>const updateIframe = (code) => { const iframe = document.createElement('iframe') document.body.querySelector('iframe')?.remove() document.body.appendChild(iframe) const content = iframe.contentDocument || iframe.contentWindow.document content.open() content.write(code) content.close() } </code></pre> </answer> </body></html>
我创建了自己的网站，我想在其中嵌入一个游戏。我的问题是音频播放了两次，并且 iframe 在游戏下方添加了一些内容。 我构建了游戏并获取了它的 html 格式。 ...
直接在 iframe 中设置 src 可以按预期工作 我正在尝试在此处嵌入 Sharepoint 文档。 例如 <p>直接在 iframe 中设置 src 可以正常工作</p> <p>我正在尝试在此处嵌入 Sharepoint 文档。</p> <p>例如</p> <pre><code><iframe src="https://rocketlane123-my.sharepoint.com/personal/lokeshkannan_rocketlane123_onmicrosoft_com/_layouts/15/Doc.aspx?sourcedoc={8822527b-0c56-44f9-8263-40c737db903c}&amp;action=embedview" width="476px" height="288px" /> </code></pre> <p>当我在脚本中设置 src 时，它失败了</p> <pre><code><iframe id="x" width="476px" height="288px"></iframe> <script> document.getElementById('x').src = "https://rocketlane123-my.sharepoint.com/personal/lokeshkannan_rocketlane123_onmicrosoft_com/_layouts/15/Doc.aspx?sourcedoc={8822527b-0c56-44f9-8263-40c737db903c}&amp;action=embedview"; </script> </code></pre> <p><a href="https://i.stack.imgur.com/MheeO.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL01oZWVPLnBuZw==" alt=""/></a></p> <p>SharePoint 中明显会发生这种情况。所以我想在这里了解一些事情。</p> <pre><code>1. Am I doing something wrong? 2. Is there any CSP headers which block the parent from adding via JS? 3. Is there any official way from SharePoint to allow this? 3. Is there any way to hack this? </code></pre> <p>提前致谢。</p> <p>由于这种情况发生在 chrome、safari 和 firefox 上，我认为这不是特定浏览器中的错误。</p> </question> <answer tick="false" vote="2"> <p>在 Firefox 中尝试此操作会产生以下错误消息：</p> <blockquote> <p>为了保护您的安全，login.microsoftonline.com 将不允许 如果其他站点嵌入了该页面，则 Firefox 将显示该页面。查看 此页面，您需要在新窗口中打开。</p> </blockquote> <p>打开控制台会显示以下消息：</p> <blockquote> <p>“X-Frame-Options”拒绝在框架中加载 [<em>url</em>] 指令设置为“DENY”。</p> </blockquote> <p>这是由 <pre><code>login.microsoft.com</code></pre> 设置的标头，用于禁用将链接嵌入为 iframe。</p> <p>此链接详细介绍了此设计选择：<a href="https://learn.microsoft.com/en-us/sharepoint/troubleshoot/sites/cannot-display-sharepoint-pages-in-iframe" rel="nofollow noreferrer">https://learn.microsoft.com/en-us/sharepoint/troubleshoot/sites/cannot-display-sharepoint-pages-in-iframe</a></p> <p>该链接提到您可以通过设置“AllowFraming”来覆盖该行为，但不建议这样做，因为嵌入它可能会导致网站破坏。</p> <p>可以在<a href="https://answers.microsoft.com/en-us/msoffice/forum/all/office-365-public-site-can-not-be-viewed-in-a-page/65ba2f7b-ce94-4df4-a7d1-1496f8b67dab" rel="nofollow noreferrer">此链接</a></p>找到使用此功能的指南 </answer> <answer tick="false" vote="0"> <p>问题出在 javascript 中，而不是 & 在链接中使用 & 。</p> <pre><code><body> <iframe id="x" width="476px" height="288px"></iframe> <script> document.getElementById('x').src = "https://rocketlane123.sharepoint.com/sites/MyDocsforSP/_layouts/15/Doc.aspx?sourcedoc={6d327004-5d52-4e42-9707-c964631f8e65}&action=embedview"; </script> </body> </code></pre> </answer> </body></html>
我能找到的与我在 SO 上尝试做的最接近的事情是这个，但听起来这不再是一个可行的解决方案，而且它也不是特定于 iFrames 的： 单击 DIV 到下面...
如果我在 iframecontent 中运行脚本，有没有办法获取属性 data-media 的值？ 代码如下所示： <p>如果我在 <pre><code>data-media</code></pre>内容中运行脚本，有没有办法获取属性 <pre><code>iframe</code></pre> 的值？</p> <p>代码如下所示：</p> <pre><code><div id="myDiv"> <iframe data-create-resource-url="http://my.domain.url" data-media="Song" frameborder="0" height="41" src="https://different.domain.url" width="366"> </iframe> </div> </code></pre> <p>我已经尝试了很多方法，例如 <pre><code>window.parent.document</code></pre> 或 <pre><code>top.document</code></pre> 或 <pre><code>window.parent</code></pre> 以及其他可用的解决方案，但似乎不起作用。 </p> </question> <answer tick="true" vote="6"> <p>嗯，你真的不需要访问父级。当您在 iframe 内运行脚本时。 iframe 当前是 iframe 内脚本的窗口。因此，访问窗口元素应该会给出上述的<pre><code>attr</code></pre>。试试这个（未测试）：</p> <pre><code>alert($(window).attr('data-media')); </code></pre> </answer> <answer tick="false" vote="4"> <p>你尝试过这个吗：</p> <pre><code>window.frameElement.getAttribute("data-media"); </code></pre> </answer> <answer tick="false" vote="0"> <p>首先，为你的iframe元素添加一个ID或CLASS（如<pre><code>id='myframe'</code></pre>）<br/> 然后，您可以使用 jquery 访问任何属性：</p> <pre><code>var parent=window.parent.document.getElementById('#myframe'); </code></pre> <p>现在只需获取您的属性（未测试）：</p> <pre><code>myAttr=$(parent).data("my-data-attribute") or myAttr=$(parent).attr("myelement") </code></pre> </answer> </body></html>
我想在我的html页面中显示word文档，我正在使用iframe，嵌入标签来显示 文档，它适用于 pdf 文件，但不适用于 doc 文件，任何人都可以帮助我解决这一问题。它...
我应该如何动态设置 iframe 的尺寸，以便尺寸灵活地适应不同的视口尺寸？ 例如： <p&...</desc> <question vote="29"> <p>我应该如何动态设置 iframe 的尺寸，以便尺寸灵活地适应不同的视口尺寸？</p> <p>例如：</p> <pre><code><iframe src="html_intro.asp" width="100%" height="300"> <p>Hi SOF</p> </iframe> </code></pre> <p>在这种情况下，高度会根据浏览器窗口的大小而有所不同。它应该根据浏览器窗口的大小动态设置。</p> <p>任何尺寸，iframe 的长宽比都应该相同。这怎么办？</p> </question> <answer tick="true" vote="38"> <p>如果你使用jquery，可以使用<pre><code>$(window).height();</code></pre></p>来完成 <pre><code><iframe src="html_intro.asp" width="100%" class="myIframe"> <p>Hi SOF</p> </iframe> <script type="text/javascript" language="javascript"> $('.myIframe').css('height', $(window).height()+'px'); </script> </code></pre> </answer> <answer tick="false" vote="14"> <p>不太确定 300 是什么意思？错字小姐？然而，对于 iframe 来说，最好使用 CSS :) - 我之前发现导入 YouTube 视频时它会忽略内联内容。 </p> <pre><code><style> #myFrame { width:100%; height:100%; } </style> <iframe src="html_intro.asp" id="myFrame"> <p>Hi SOF</p> </iframe> </code></pre> </answer> <answer tick="false" vote="3"> <p><del>您在 iframe 的定义中尝试过 <pre><code>height="100%"</code></pre> 吗？如果您在 CSS 中为“body”添加 <pre><code>height:100%</code></pre>（如果不这样做，100% 将是“100% 的内容”），它似乎会实现您想要的功能。</del></p> <p>编辑：不要这样做。 <pre><code>height</code></pre> 属性（以及 <pre><code>width</code></pre> 属性）必须具有整数作为值，而不是字符串。</p> </answer> <answer tick="false" vote="2"> <p>我发现它在所有浏览器和设备（PC、桌面和移动设备）上效果最佳。</p> <pre><code><script type="text/javascript"> function iframeLoaded() { var iFrameID = document.getElementById('idIframe'); if(iFrameID) { // here you can make the height, I delete it first, then I make it again iFrameID.height = ""; iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px"; } } </script> <iframe id="idIframe" onload="iframeLoaded()" frameborder="0" src="yourpage.php" height="100%" width="100%" scrolling="no"></iframe> </code></pre> </answer> <answer tick="false" vote="1"> <p>最新的 CSS 规则将允许您直接使用视口，如下所示：</p> <pre><code><iframe src="html_intro.asp" width="100vw" height="50vh"> <p>Hi SOF</p> </iframe> </code></pre> <hr/> <p>我个人喜欢通过操作其父容器来调整<pre><code>iframes</code></pre>：</p> <pre><code><div class='iframe-parent'> <iframe src="html_intro.asp"> <p>Hi SOF</p> </iframe> </div> </code></pre> <p>现在是CSS：</p> <pre><code>.iframe-parent{ width: 100vw; height: 50vh; } /* Expand to the entire container */ iframe{ width: 100%; height: 100%; } </code></pre> </answer> <answer tick="false" vote="0"> <p>现在可以通过 CSS 宽高比来完成！</p> <p>在 iframe 上设置所需的宽度（例如 100%），然后为您的内容设置适当的宽高比。</p> <pre><code>iframe { aspect-ratio: 4 / 3; width: 100%; } </code></pre> <p>浏览器会根据宽高比自动缩放内容。</p> <p>您可能还想根据您的内容设置最小/最大宽度或高度。</p> <p>您可以自己计算自定义纵横比，或使用像这样的在线实用程序<a href="https://andrew.hedges.name/experiments/aspect_ratio/" rel="nofollow noreferrer">纵横比计算器</a>。</p> </answer> <answer tick="false" vote="-4"> <p><strong>高度因浏览器窗口大小而异。它应该根据浏览器窗口的大小动态设置</strong></p> <pre><code><!DOCTYPE html> <html> <body> <center><h2>Heading</h2></center> <center><p>Paragraph</p></center> <iframe src="url" height="600" width="1350" title="Enter Here"></iframe> </body> </html> </code></pre> </answer> </body></html>
我有一个脚本，当 iframe 中的表单提交并且新内容加载到 iframe 中时，该脚本会将页面滚动到顶部。 document.querySelector("iframe").addEventListener("加载&
如何检测浏览器是否会使用 JavaScript 显示或下载 PDF？
假设我有： 带有 iFrame 的网页： 指向 PDF 文档的 URL：http://www.example.com/file.pdf 一些 JavaScr...
使用python和flask将文件从File_storage发送到前端嵌入到iframe中
在过去的几天里，我一直在尝试将文件发送到我的前端以在 iframe 中渲染，但我一直在努力解决这个问题。我正在使用蟒蛇和烧瓶。 我没有提供任何c...
我有一些网站嵌入了不同的谷歌地图。（iframe）在过去的几个月里我阅读了很多有关数据保护和隐私政策的内容。谷歌地图存在很多风险......
我这里有一个包含 YT 视频的流体 iframe，我试图让包含以下描述的跨度“粘”到 iframe 的底部，无论文本的长度如何。 ...
我的页面中有一个 iframe，当我单击它时，我会显示一个包含信息的小方块。问题是 iframe 通过发布消息给出的坐标是正确的，除非滚动 i...