iframe 相关问题

未捕获的引用错误：iFrameResize 未定义

我需要使我的 iframe 高度根据其内容高度动态调整。我正在使用 davidjbradshaw 的 iframeResizer.js 来完成该任务。 我在

包含嵌入/发布的 Google 文档的 Iframe 自动高度

我有一个 iframe，其中包含已发布的 Google 文档。该文档的内容可能会发生变化，因此我想根据其内容自动调整 iframe 的高度。我找到了一些解决方案......

iOS - iFrame 中的本机滚动

所以我有一个 iFrame 显示 Facebook 页面，我正在尝试启用本机“弹跳”类型滚动，但无法让任何东西工作。 我已经尝试过这个： 内联框架{ 溢出-y：滚动！

<iframe> 下载 pdf 文件而不是显示

这是我的component.html 这个</desc> <question vote="4"> <p>这是我的组件.html</p> <pre><code> &lt;iframe [src]=&#34;frameSrc | safe&#34; class=&#34;frameSet&#34; type=&#34;application/pdf&#34; frameborder=&#34;0&#34; webkitallowfullscreen mozallowfullscreen allowfullscreen&gt; This browser does not support PDFs. Please download the PDF to view it: &lt;a href=&#34;frameSrc | safe&#34;&gt;Download PDF&lt;/a&gt; &lt;/iframe&gt; </code></pre> <p>当此组件在我的浏览器（<strong>Chrome</strong>）中打开时，将下载 pdf，而不是显示。 <pre><code>frameSrc</code></pre> 来自我指定为 <pre><code>[src]</code></pre> 的父组件。我想显示 pdf 而不是下载。我做了一些研究，发现浏览器默认的 <pre><code>Content-Disposition</code></pre> 是 <pre><code>attachment</code></pre>。我怎样才能改变它，以便它适用于每个浏览器？ </p> </question> <answer tick="false" vote="1"> <ul> <li><p>我不明白为什么属性周围有括号：<pre><code>[src]</code></pre>如果您还不知道：不要这样做。</p> </li> <li><p><pre><code>&lt;iframe&gt;</code></pre> 没有 <pre><code>type</code></pre> 作为有效属性，但 <pre><code>type</code></pre> 确实适用于 <pre><code>&lt;iframe&gt;</code></pre> 的姊妹标签 <pre><code>&lt;object&gt;</code></pre> 和 <pre><code>&lt;embed&gt;</code></pre>。</p> </li> </ul> <p>由于沙箱的限制，以下演示无法在 SO 上运行。前往这个 <s><strong>Plunker</strong></s> 查看功能演示。源 PDF 由 <strong><a href="https://pdfobject.com/static.html" rel="nofollow noreferrer">PDFObject</a></strong></p> 提供 <hr/> <s>笨蛋</s> --- 演示 ==== <p><em><strong>看起来 Plunker 不再运行嵌入内容，因此如果您想查看功能演示，只需将整个代码复制并粘贴到任何文本编辑器（记事本、Notepad++ 等）中，然后另存为 HTML 文件（ .html 文件扩展名）。</strong></em></p> <hr/> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; * { margin: 0; padding: 0; } figure { display: table; border: 3px ridge grey; position: relative; width: 96vw; min-height: 250px; height: auto; margin: 0 auto 35px; } figcaption { border: 3px ridge grey; text-align: center; font: 900 20px/1.5 Verdana; padding: 0 0 8px 0; background: rgba(51, 51, 51, 0.3); color: #fff; } iframe, object, embed { overflow: hidden; position: absolute; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;figure&gt; &lt;figcaption&gt;IFRAME&lt;/figcaption&gt; &lt;iframe src=&#34;https://pdfobject.com/pdf/sample-3pp.pdf#page=1&#34; class=&#34;frameSet&#34; frameborder=&#34;0&#34; allowfullscreen width=&#34;100%&#34; height=&#34;100%&#34;&gt;&lt;/iframe&gt; &lt;/figure&gt; &lt;figure&gt; &lt;figcaption&gt;OBJECT&lt;/figcaption&gt; &lt;object data=&#34;https://pdfobject.com/pdf/sample-3pp.pdf#page=2&#34; class=&#34;objectSet&#34; type=&#34;application/pdf&#34; width=&#34;100%&#34; height=&#34;100%&#34;&gt;&lt;/object&gt; &lt;/figure&gt; &lt;figure&gt; &lt;figcaption&gt;EMBED&lt;/figcaption&gt; &lt;embed src=&#34;https://pdfobject.com/pdf/sample-3pp.pdf#page=3&#34; class=&#34;embedSet&#34; type=&#34;application/pdf&#34; width=&#34;100%&#34; height=&#34;100%&#34;&gt; &lt;/figure&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>您需要像下面这样修改您的网址</p> <pre><code>iframeURL = &#39;urlThatYouGetFromAPI&#39; + &#39;&amp;embedded=true&#39; &lt;iframe [src]=&#34;iframeURL&#34;&gt;&lt;/iframe&gt; </code></pre> <p>实际上，您只需将此字符串 <pre><code>&amp;embedded=true</code></pre> 添加到 URL 末尾即可。</p> <p>您也可以使用 domSanatizer 使其更安全</p> <pre><code> readonly #domSanitizer = inject(DomSanitizer); iframeURL = this.#domSanitizer.bypassSecurityTrustResourceUrl( `${URL}&amp;embedded=true` ); </code></pre> </answer> <answer tick="false" vote="-3"> <p>问题是我正在渲染一个通过 https 的 pdf，而我一直得到的只是 CORS 错误</p> <p>我刚刚在 index.html 文件中添加了一个元标记，如以下部分所示：</p> <pre><code>&lt;meta http-equiv=&#34;Content-Security-Policy&#34; content=&#34;upgrade-insecure-requests&#34;&gt; </code></pre> <p>在我想显示它的页面/模块中如下：</p> <pre><code> &lt;object data=&#34;your_url_to_pdf&#34; type=&#34;application/pdf&#34;&gt; &lt;iframe src=&#34;https://docs.google.com/viewer? url=your_url_to_pdf&amp;embedded=true&#34; frameborder=&#34;0&#34; webkitallowfullscreen mozallowfullscreen allowfullscreen&gt; &lt;/iframe&gt; &lt;/object&gt; </code></pre> </answer> </body></html>

如何使用 iframe-resizer 和 React JS 页面作为内容？

我有一个带有 iframe 的主机网页。我还有一个子页面，嵌入到主机的 iframe 中，这是一个 React 应用程序。我希望iframe的高度随着孩子的变化自动调整...

当 iframe 内容的高度发生变化时自动调整 iframe 高度（同一域）

我正在页面内加载一个iframe，iframe内容的长度会不时改变。我已经实施了以下解决方案。然而高度是固定的

如何访问沙盒 iframe 内嵌套 iframe 的 iframe.contentWindow.document？

我想创建一个沙盒（frame1），以便它仍然可以运行脚本但无法访问其父级。我还希望frame1能够创建一个内部沙盒iframe（frame2），c...</desc> <question vote="1"> <p>我想创建一个沙盒<pre><code>&lt;iframe&gt;</code></pre>（<em>frame1</em>），以便它仍然可以运行脚本但无法访问其父级。我还希望 <em>frame1</em> 能够创建一个无法运行任何 JavaScript 的内部沙盒 iframe (<em>frame2</em>)。我希望 <em>frame1</em> 仍然能够操纵 <em>frame2</em>。</p> <p>我知道通过设置 <em>frame1</em> 的 <pre><code>sandbox=&#34;allow-same-origin&#34;</code></pre>，我可以从中访问 <em>frame2</em>，但它也可以访问其父级。</p> <p>尝试了不同 <pre><code>sandbox</code></pre> 值之间的多种组合以及设置 <pre><code>&lt;iframe&gt;</code></pre> 元素源的方法，我遇到了两个主要错误消息：</p> <ol> <li>“不允许加载本地资源：blob:....”</li> <li>“未捕获的 DOMException：无法从“窗口”读取命名属性“文档”：阻止来源为“null”的框架访问跨源框架”</li> </ol> <p>这是我用来测试各种可能性的代码片段：</p> <pre><code>var inner = [0,0,0,0] var outer = [0,0,0] var focus = null document.body.innerHTML = [ [0,0],[0,1],[0,2], [1,0],[1,1],[1,2], [2,0],[2,1],[2,2], [3,0],[3,1],[3,2], ].map(([i,o]) =&gt; `&lt;button&gt;${i}-${o}&lt;/button&gt;`).join(&#39;&#39;) const container = document.createElement(&#39;div&#39;) const buttons = [...document.body.children] document.body.append(container) buttons.map(btn =&gt; { btn.onclick = reload }) function reload () { if (focus) focus.style = &#39;&#39; const btn = focus = this btn.style = &#39;background-color: pink;&#39; const text = btn.textContent const [I,O] = text.split(&#39;-&#39;).map(Number) inner = inner.map((x, i) =&gt; i === I) outer = outer.map((x, o) =&gt; o === O) container.replaceChildren() spawn(container) } // ----------------------------------------------- async function spawn (element) { const program = &#39;test&#39; const htmlsrc = `&lt;!DOCTYPE html&gt; &lt;html&gt;&lt;head&gt;&lt;meta charset=&#34;utf-8&#34;&gt;&lt;/head&gt;&lt;body&gt;333&lt;/body&gt;&lt;/html&gt;` const blobsrc = new Blob([htmlsrc], { type: &#34;text/html&#34; }) const hrefsrc = URL.createObjectURL(blobsrc) const datauri = `data:text/html;charset=utf-8,${htmlsrc}` const src_js = ` const iframe = document.createElement(&#39;iframe&#39;) iframe.setAttribute(&#39;sandbox&#39;, &#39;allow-same-origin&#39;) const html = \`&lt;!DOCTYPE html&gt; &lt;html&gt;&lt;head&gt;&lt;meta charset=&#34;utf-8&#34;&gt;&lt;/head&gt;&lt;body&gt;333&lt;/body&gt;&lt;/html&gt;\` const blob = new Blob([html], { type: &#34;text/html&#34; }) const href = URL.createObjectURL(blob) const href2 = &#34;${hrefsrc}&#34; const href3 = \`${datauri}\` console.log({ href: href }) console.log({ href2: href2 }) console.log({ href3: href3 }) console.log({ lhref: location.href }) // not allowed to load resource if (${inner[0]}) iframe.setAttribute(&#39;src&#39;, href2) // no cross origin access: if (${inner[1]}) iframe.setAttribute(&#39;src&#39;, href) if (${inner[2]}) iframe.setAttribute(&#39;srcdoc&#39;, html) if (${inner[3]}) iframe.setAttribute(&#39;src&#39;, href3) iframe.onload = () =&gt; { console.log(&#34;readonly iframe loaded&#34;) const innerDoc = iframe.contentWindow.document console.log(innerDoc.body.innerHTML) } document.body.appendChild(iframe) ` const string = src_js const sandbox = &#39;allow-scripts&#39; const html = index_html(wrap(string, program)) const src = _2href(_2blob(html), `#${program}`) const srcuri = `data:text/html;base64,${btoa(html)}` if (outer[0]) { const { global, data, port } = await iframer(element, { srcdoc:html, sandbox }) } if (outer[1]) { const { global, data, port } = await iframer(element, { src: srcuri, sandbox }) } if (outer[2]) { const { global, data, port } = await iframer(element, { src, sandbox }) } } // ---------------------------------------------------------------------- function _2blob (html) { return new Blob([html], { type: &#34;text/html&#34; }) } function _2href (blob, query = &#39;&#39;) { return URL.createObjectURL(blob) + query } function index_html (source) { return `&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;&lt;meta charset=&#34;utf-8&#34;&gt;&lt;/head&gt; &lt;body&gt;${source}&lt;/body&gt; &lt;/html&gt;` } function wrap (source_js, program) { const filepath = `${program || &#39;(anonymous)&#39;}.js` const bootloader_js = `;(async element =&gt; { // document.currentScript.remove() const source = element.textContent element.remove() console.log(&#39;load: &#39; + &#39;${program}&#39;) eval(source) //# sourceURL=(iojs:bootloader) //# ignoreList=(iojs:bootloader) })(document.querySelector(&#39;[type=&#34;text&#34;]&#39;))` source_js = `;(async () =&gt; { console.log(&#39;run: &#39; + &#34;${filepath}&#34;);${source_js} //# sourceURL=${filepath} //# ignoreList=${filepath} })()` return ` &lt;script type=&#34;text&#34;&gt;${source_js}&lt;/`+`script&gt; &lt;script&gt;${bootloader_js}&lt;/`+`script&gt; ` } // ---------------------------------------------------------------------- function iframer (element, { src, srcdoc, sandbox = &#39;&#39;, timeout } = {}) { const el = document.createElement(&#39;div&#39;) const sh = el.attachShadow({ mode: &#39;closed&#39; }) sh.innerHTML = `&lt;iframe sandbox=&#34;${sandbox}&#34;&gt;&lt;/iframe&gt;` const [iframe] = sh.children const { promise, resolve, reject } = Promise.withResolvers() iframe.onload = onload window.addEventListener(&#39;message&#39;, onmessage) const id = timeout !== undefined ? setTimeout(ontimeout, timeout) : null if (src) iframe.src = src else if (srcdoc) iframe.srcdoc = srcdoc element.append(el) return promise function ontimeout () { window.removeEventListener(&#39;message&#39;, onmessage) iframe.onload = undefined reject(new Error(&#39;iframe timeout&#39;)) } function onload () { clearTimeout(id) iframe.onload = undefined window.removeEventListener(&#39;message&#39;, onmessage) resolve({ global: iframe.contentWindow, data: null, port: null }) } function onmessage (event) { const { source, data = null, ports: [port = null] } = event if (source === iframe.contentWindow) { clearTimeout(id) iframe.onload = undefined window.removeEventListener(&#39;message&#39;, onmessage) const sorigin = sandbox.includes(&#39;allow-same-origin&#39;) resolve({ global: sorigin ? iframe.contentWindow : null, data, port }) } } } </code></pre> <p>到目前为止我尝试过的所有内容都可以在<a href="https://codepen.io/serapath/pen/qBGbpMG?editors=0010" rel="nofollow noreferrer">this codepen</a></p>中找到 </question> <answer tick="false" vote="0"> <p>为了简单起见，我将顶部文档称为 <em>top</em>，第一帧为 <em>frame1</em>，内部文档为 <em>frame2</em>。</p> <p>我不是 100% 确定到底发生了什么，但仅从外观来看，我想说就好像 <pre>frame1</pre> 上的 <em><code>sandbox</code></em> 属性将使其拥有自己的起源，但是它的子资源将加载仍将匹配最顶部可导航的原点。所以 <em>frame2</em> 和 <em>top</em> 是同源的，但是 <em>frame1</em> 有自己的不透明原点。无论您如何加载 <em>frame2</em>，这都会成立。</p> <p>我现在能想到的唯一破解方法是使用 <pre><code>data:</code></pre> URL¹ 来加载 <em>frame1</em>，并且其 <pre><code>sandbox</code></pre> 上没有 <pre><code>&lt;iframe&gt;</code></pre> 属性。 <em>frame1</em>中的脚本仍然无法访问<em>top</em>，因为<pre><code>data:</code></pre> URL也是不透明的URL。然而 <pre><code>srcdoc</code></pre> 的原点将基于其不透明原点，而不是基于 <em>top</em> 的原点，因此我们可以从 <em>frame1</em> 中加载 <em>frame2</em> 到 <pre><code>srcdoc</code></pre> 中，并使用 <pre><code>sandbox=&#34;allow-same-origin&#34;</code></pre> 以便 <em>frame1 </em>可以访问<em>frame2</em>，但<em>frame1</em>无法访问<em>top</em>，<em>frame2</em>无法执行脚本。</p> <p>但这意味着您需要获取 <em>frame1</em> 的内容，以便您可以创建它的 <pre><code>data:</code></pre> URL 版本，以及 <em>frame2</em> 的内容，以便您可以将其设置为 <pre><code>srcdoc</code></pre>。这样做时，请记住 <em>frame1</em> 现在处于不透明源，因此为了能够在服务器上获取资源，您需要传递 <pre><code>Access-Control-Allow-Origin: *</code></pre> 标头，这可能是您不想要的。因此，您可能必须从<em>top</em>获取这两个文档。</p> <p>这会给，</p> <p><em>frame1.html</em></p> <pre><code>&lt;h1&gt;I am frame 1&lt;/h1&gt; &lt;!-- Below src will be replaced by the top window --&gt; &lt;iframe src=&#34;frame2.html&#34; sandbox=&#34;allow-same-origin&#34;&gt;&lt;/iframe&gt; &lt;script&gt; const frame = document.querySelector(&#34;iframe&#34;); onload = e =&gt; frame.contentDocument.body.append(&#34;frame 1 can access frame 2&#34;); parent.document.body.append(&#34;Oops frame 1 can access parent&#34;); // cross-origin, won&#39;t happen &lt;/script&gt; </code></pre> <p><em>frame2.html</em></p> <pre><code>&lt;h1&gt;I am frame 2&lt;/h1&gt; &lt;script&gt; // Shouldn&#39;t happen alert(&#34;OoPs, running script&#34;); &lt;/script&gt; </code></pre> <p><em>top.html</em></p> <pre><code>&lt;iframe height=300&gt;&lt;/iframe&gt; &lt;script type=module&gt; const frame1Content = await fetch(&#34;./frame1.html&#34;).then(resp =&gt; resp.text()); const frame2Content = await fetch(&#34;./frame2.html&#34;).then(resp =&gt; resp.text()); const frame = document.querySelector(&#34;iframe&#34;); // We can&#39;t have `&#34;` in the content since we use it for the attribute const cleanFrame2Content = frame2Content.replace(/&#34;/g, &#34;\\\&#34;&#34;); // Replace the src attribute by the actual content of frame2.html const cleanFrame1Content = frame1Content.replace(`src=&#34;frame2.html&#34;`, `srcdoc=&#34;${cleanFrame2Content}&#34;`); frame.src = `data:text/html,${encodeURIComponent(cleanFrame1Content)}` &lt;/script&gt; </code></pre> <p><a href="https://jsfiddle.net/myk8gobc/" rel="nofollow noreferrer">作为 JSFiddle</a>，因为 StackSnippet 的 <em>null</em> 起源的 iframe 将完全阻止任何子框架访问其他框架。</p> <p>^{1。使用另一个域也可以实现相同的效果，这基本上就是 JSFiddle 等服务保护其主文档但仍允许用户嵌入同源 iframe 的方式。}</p> </answer> </body></html>

如何访问iframe内嵌套iframe的iframe.contentWindow.document？

我一整天都在尝试嵌套创建的 iframe 并访问其内容，但安全限制不允许我这样做。有办法吗？我在 codepen 中分享了我的代码以及迄今为止我尝试过的所有内容。 https://

Planner 嵌入共享点

我正在尝试将 Planner 嵌入到 Sharepoint 中。我在地址的开头和结尾添加了 iframe，并尝试嵌入它，但它显示任务没有响应。在共享点站点设置中，

循环 iframe 等待准备完成操作

我正在将一系列基于日期的 URL 加载到 iframe 中，以使用顶部框架上的脚本（同源）从每个页面提取数据。 等待 iframe 的最佳/最有效方法是什么...

带有 iframe 的 CORS - 登录失败并显示“400 错误请求”

我们使用 IIS 10 Web 服务器托管 ASP.Net Razor Pages 应用程序 (.Net 7.0)。该应用程序本身运行良好。现在，我们的一位客户决定在自己的网站上使用该应用程序，嵌入......

简单的跨域iframe postMessage在jsfiddle中有效，但在本地无效

我正在尝试在另一个域上使用 iframe，但我陷入了“Hello World！”阶段。 我有两个文件，通过两个静态服务器提供服务。我通过两个不同的

嵌入式 Unity 游戏未构建，错误消息：HTTP 连接可能不支持 Brotli 压缩

为了测试未来的项目，我创建了一个 Unity 游戏，我想将其托管在我的 Next.js 网站上。我从 Unity 下载了 WebGL，并将游戏文件放在 Public 中......

无法访问某个元素，因为它位于 Iframe 中

我目前正在尝试开发一个依赖于视频元素的 Chrome 扩展。当我尝试访问它时，我遇到了错误。 我写的第一个代码是如果 ifr...

如何提高 Iframe 嵌入视频的加载速度？

stackoverflow 上可爱的人们大家好。 我在 Dreamweaver 中使用 html 和 css 创建网站。 我从电视档案库中获取视频，并使用 iframe 将它们嵌入到我的网站上。它...

使 YouTube 视频嵌入响应式

我的网页上嵌入了一些来自 YouTube 的视频。问题是我正在使用下面附加的代码来使其响应（通过引导程序）。它在手机和平板电脑上很好用，但在桌面上......

iframe 或嵌入网站有什么替代方案吗？

我希望你一切都好。几周来我一直在为我的应用程序开发功能，但我不知道如何解决该问题。 我想做的是：插入任何网站...

有没有办法告诉cefsharp将javascript发送到哪个iframe？

我正在使用 cefsharp 创建自己的应用程序，并使用 ExecuteScriptAsync 将 javascript 发送到正在查看的网站。但是，我遇到了我需要使用的元素嵌套的问题......

有没有办法自动播放 Instagram 卷轴嵌入？

<question vote="0"> <pre><code>&lt;iframe id=&#34;instagramEmbed&#34; src=&#34;https://www.instagram.com/reel/C6zTuu3s6MB/embed/&#34; scrolling=&#34;no&#34; allowtransparency=&#34;true&#34; allowfullscreen=&#34;true&#34; frameborder=&#34;0&#34; width=&#34;300&#34; height=&#34;600&#34; play&gt;Iframe not supported&lt;/iframe&gt; </code></pre> <p>我想自动播放这个卷轴有办法吗？</p> <p>我尝试将自动播放或类似的东西放入 iframe 中，但它不起作用。</p> </question> <answer tick="false" vote="0"> <p>你可以这样做：</p> <pre><code>document.getElementById(&#34;instagramEmbed&#34;).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