iframe 相关问题

“iframe”是一个HTML元素,它在文档中创建“内嵌框架”,允许在同一页面中显示单独的文档。

将嵌入式 iframe 的背景更改为其他颜色或透明

我正在 Squarespace 上嵌入一个 iframe 并尝试更改 iframe 背景的颜色以匹配我的网站的背景(#F6F3EA),但它不起作用。我得到了嵌入代码…

回答 1 投票 0

访问 iframe 问题 - 用于自动化测试的 python selenium

我正在尝试访问以下 iframe: 但我尝试的所有操作都无法找到它,因此无法找到first_name_value 元素来与文本框交互并填充文本框。 两条路

回答 1 投票 0

使用 Python 中的 nodriver 库与 iframe 内的按钮进行交互

我正在使用 Python 开发一个自动化测试项目,并使用一个名为 nodriver 的库。目前,我在选择和单击 iframe 中的按钮时遇到困难,特别是 reCAPT...

回答 1 投票 0

以 src 作为动态属性的 iframe

下午好。我有一个 Angular JS 应用程序,它可以正确生成 SSRS 报告。但它是硬编码的。我想从配置中提出 url。 为此,我在视图中替换了它: <...

回答 1 投票 0

从 aws s3 检索对象并在 Next.js 的网页中显示该对象时出错

我正在构建一个chatpdf应用程序,我想在浏览器上显示pdf,这些pdf作为对象存储在我的s3存储桶中。当我使用下面的代码时,我无法显示 pdf。我是…

回答 1 投票 0

如何正确缩放网格内的 iframe?

项目 顺风 反应 取消缩放 iframe 时,它会扰乱网格内 iframe 的位置。 预期:取消 iframe 缩放后,它应该保持相同的位置,但尺寸减小。

回答 1 投票 0

移动端的 iframe 问题

场景 我有一个网站,在桌面浏览器中运行良好,但在移动设备上出现问题。我正在 iframe 中加载 pdf 文件并在模式弹出窗口中显示。但不知道发生了什么

回答 3 投票 0

如何在 iframe 中使用 MUI React 组件?

与Material UI网站上的截图类似,我想创建这个“盒子”来保存我的iframe内容,其中包括导航栏、菜单抽屉等。但是,我想利用...

回答 1 投票 0

在 WordPress 中嵌入 iframe 不起作用

我需要在自托管的 Wordpress 安装中嵌入以下代码 - <p>我需要在自托管 Wordpress 安装中嵌入以下代码 - </p> <pre><code>&lt;iframe id=&#34;slydy&#34; style = &#34;border: none; max-width: 100%; min-width: 100px;&#34; src = &#34;http://slydy.co/users/TCC/01&#34; width = &#34;648&#34; height = &#34;435&#34; frameborder = &#34;0&#34; marginwidth = &#34;0&#34; marginheight = &#34;0&#34; scrolling = &#34;no&#34; allowfullscreen = &#34;allowfullscreen&#34;&gt; &lt;/iframe&gt; </code></pre> <p>但它就是不显示。我已经在至少另外两个 WordPress 博客上安装了相同的软件,并且运行良好。 </p> <p>我需要调整什么设置? </p> </question> <answer tick="false" vote="7"> <p>可能是以下之一:</p> <ol> <li>如果您的网站是 httpS,那么它会被阻止,因为您的 iframe 是 http。 </li> <li>确保您在帖子编辑屏幕上处于文本(而非视觉)编辑模式</li> <li>WP 缓存?</li> </ol> </answer> <answer tick="false" vote="2"> <p>Wordpress 编辑器会阻止/删除 iframe。尝试使用一些支持 iframe 的插件,例如制作一个简码来制作 iframe。 </p> </answer> <answer tick="false" vote="0"> <p>我不知道为什么,但嵌入在我的网站上运行良好。突然,我注意到嵌入内容仅在 WordPress 自定义模式下显示(在视觉部分)。当我保存更改并关闭定制器时,iframe 嵌入不会显示。经过谷歌搜索后,我找到了解决方案。解决方案是 Iframe 插件,可以在这里找到:<a href="https://wordpress.org/plugins/iframe/" rel="nofollow noreferrer">https://wordpress.org/plugins/iframe/</a></p> <p>在您的网站上启用此插件后,您只需更改以下代码:</p> <p>例如,如果您的 iframe 代码是 <iframe ...........................> '',则必须将其更改为 [iframe ........................................]。 </p> <p>所以你在这里所做的事情正在改变< with [ and removing the '</iframe</p> <blockquote> <p>'。</p> </blockquote> <p>希望这对某人有帮助。</p> </answer> </body></html>

回答 0 投票 0

html iframe 多列

我正在编写一个网站,作为我所有内容(博客文章、YouTube 视频等)的集合,并希望有一个 YouTube 嵌入页面。我想要两列嵌入,但不知道如何做。我...

回答 2 投票 0

使 iframe 可拖动?

我正在尝试使聊天小部件可拖动,我已经通过react-draggable成功地做到了这一点。然而,这个聊天小部件也被 iframe 使用,它完全是通过 HTM 创建的......

回答 1 投票 0

是否有任何客户端解决方案可以在具有响应类型应用程序/八位字节流的 iframe 中显示 PDF(而不是下载)?

我从 API 获取一些 PDF,并通过将 URL 设置为 iframe 的 src 在 iframe 中显示它们。想象一下,它类似于 example.com/pdf1.pdf、exmaple.com/pdf2.pdf 等。 一些美国...

回答 1 投票 0

有没有办法在 youtube iframe api 中更改音频语言?

有更改音频语言的参数吗? 我想更改音频语言,例如 cc_lang_pref = "ko" 但没有像audio_lang_pref这样的参数名称。 有没有办法改变音频语言...

回答 1 投票 0

如何验证 Grafana 图表并将其嵌入到 iframe 中?

我将 Grafana 中的图表嵌入到我的 HTML 页面的 iframe 中。 它一直要求我在 iframe 中输入 un/pw。 我如何绕过登录? 有没有办法在代码中绕过它? 难道是……

回答 3 投票 0

Instagram 添加了 x-frame-options DENY,因此他们的嵌入脚本停止工作?

当您想将 Instagram 帖子嵌入到您的网站时,Instagram 提供了一个嵌入按钮,可以有效地使用 ...

回答 1 投票 0

Firefox 在具有同源 PDF 的 iframe 上抛出跨源错误

我有一个 iframe,设置为显示从同一源加载的 PDF。 当我运行这个 JS 来检查 ifr 是否...

回答 1 投票 0

为什么这个 onClick 事件在 HTML iframe 中不起作用?

我正在尝试使用 onClick 事件在用户单击 iframe 时进行注册。为什么这不起作用? 这是一个小提琴 代码: 函数 myFunction() {...</desc> <question vote="2"> <p>我正在尝试使用 onClick 事件在用户单击 iframe 时进行注册。为什么这不起作用?</p> <p>这是一个<a href="https://jsfiddle.net/8wropLmb/13/" rel="nofollow noreferrer">小提琴</a></p> <p>代码:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script&gt; function myFunction() { document.getElementById(&#34;demo&#34;).innerHTML = &#34;Hello World&#34;; } &lt;/script&gt; &lt;/head&gt; &lt;body onLoad=&#34;def()&#34;&gt; &lt;iframe id=&#34;myFrame&#34; border=&#34;0&#34; onclick=&#34;myFunction()&#34;&gt;&lt;/iframe&gt; &lt;p id=&#34;demo&#34;&gt;&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> </question> <answer tick="false" vote="1"> <p>如果 iframe 来自您自己的站点,您可以写:</p> <pre><code>document.getElementById(&#34;myFrame&#34;) .contentWindow.document.body .onclick = function() { alert(&#34;iframe clicked&#34;); } </code></pre> <p>但是,如果 iframe 与主机页面来自不同的域,则该代码将不起作用。</p> </answer> <answer tick="false" vote="0"> <p>我不知道这是否适用于没有 CORS 或其他什么的网站,但对于我所需要的,这适用于具有不同 ID 的多个 iframe - <a href="https://jsfiddle.net/ab0a/1fyoajqc/6/" rel="nofollow noreferrer">https://jsfiddle.net/ab0a/1fyoajqc/6/</a></p> <pre><code>&lt;!-- Multiple iframes with different IDs --&gt; &lt;iframe id=&#34;iframe&#34; src=&#34;https://livestream.com/accounts/5690925/events/6124324/player?width=960&amp;height=540&amp;enableInfoAndActivity=true&amp;defaultDrawer=feed&amp;autoPlay=true&amp;mute=false&#34; width=&#34;960&#34; height=&#34;540&#34; frameborder=&#34;0&#34; scrolling=&#34;no&#34; allowfullscreen&gt;&lt;/iframe&gt; &lt;iframe id=&#34;iframetwo&#34; src=&#34;iframe/here/too&#34; width=&#34;960&#34; height=&#34;540&#34; frameborder=&#34;0&#34; scrolling=&#34;no&#34; allowfullscreen&gt;&lt;/iframe&gt; &lt;iframe id=&#34;iframethree&#34; src=&#34;iframe/here/as/well&#34; width=&#34;960&#34; height=&#34;540&#34; frameborder=&#34;0&#34; scrolling=&#34;no&#34; allowfullscreen&gt;&lt;/iframe&gt; &lt;div id=&#34;message&#34;&gt;&lt;/div&gt; &lt;script&gt; var monitor = setInterval(function() { var elem = document.activeElement; if (elem.id == &#39;iframe&#39;) { message.innerHTML = &#39;One&#39;; //use clearInterval(monitor); if you want to stop checking //clearInterval(monitor); } if (elem.id == &#39;iframetwo&#39;) { message.innerHTML = &#39;Two&#39;; //clearInterval(monitor); } }, 100); /* If you only want to check for a specific iframe once, but still want to check for others, set up another monitor for that specific iframe */ var monitorTwo = setInterval(function() { var elemTwo = document.activeElement; if (elemTwo.id == &#39;iframethree&#39;) { message.innerHTML = &#39;Three&#39;; message.style = &#39;background-color: red;&#39;; clearInterval(monitorTwo); } }) &lt;/script&gt; </code></pre> </answer> <answer tick="false" vote="0"> <p>这个工人对我来说,用 CSS </p> <pre><code>.thumbnail .item iframe{ position: absolute ; inset:0; pointer-events: none;} .thumbnail .item.active iframe{ pointer-events: auto !important;} </code></pre> <p>现在缩略图中的 iframe 是可点击的,并且所有 iframe 按钮都在 tge iframe 的整个区域内,当点击 iframe 时,可点击事件通过移动轮播来工作(这是我的 2 个要求)</p> <p>可点击事件,位于app.js文件中</p> <pre><code> &#39; // click thumbnail thumbnails.forEach((thumbnail, index) =&gt; { thumbnail.addEventListener(&#39;click&#39;, () =&gt; { itemActive = index; showSlider(); }) })&#39; </code></pre> <p>只需确保指针事件:无;从缩略图 iframe 活动中删除并使其自动</p> </answer> <answer tick="false" vote="-1"> <p>我对以下 JS 的运气比较好:</p> <pre><code>document.getElementById(&#34;myFrame&#34;).contentWindow.onclick = function() { alert(&#34;iframe clicked&#34;); } </code></pre> </answer> </body></html>

回答 0 投票 0

加载指定#element的iframe会将父视点移动到相同位置

我使用这个 javascript 加载一个网页,该网页滚动到我需要的区域到 中。但每当给定的 iframe 加载时,视口就会立即跳转到该点,就像我使用的#</desc> <question vote="3"> <p>我使用这个 javascript 加载一个网页,该网页滚动到我需要的区域到<pre><code>&lt;iframe&gt;</code></pre>。但每当给定的 iframe 加载时,视口就会立即跳转到该点,就像我在 URL 末尾使用 <pre><code>#asContainer</code></pre> 一样。</p> <p>HTML:</p> <pre><code>&lt;h3&gt;Audiosurf&lt;/h3&gt; &lt;div id=&#34;asContainerWrapper&#34;&gt; &lt;iframe id=&#34;asContainer&#34; scrolling=&#34;no&#34;&gt;&lt;/iframe&gt; &lt;/div&gt; </code></pre> <p>JavaScript:</p> <pre><code>$(document).ready(function(){ $(&#39;#asContainer&#39;).attr(&#39;src&#39;,&#39;//audio-surf.com/mypage.php?u=DJDavid98#favorites_container&#39;); }); </code></pre> </question> <answer tick="true" vote="7"> <p>根据第一个答案,我想出了这个:</p> <p><a href="http://jsfiddle.net/UZZ4c/1/">http://jsfiddle.net/UZZ4c/1/</a></p> <p>如您所见,它只是在显示之前加载和重新滚动时隐藏和显示 iframe。 </p> <p>我的第一个想法是你不应该需要滚动。 iframe 元素在加载时不可见,并且浏览器不应滚动到锚点 <a href="http://jsfiddle.net/UZZ4c/2/">http://jsfiddle.net/UZZ4c/2/</a> 但是我没有测试这个理论,所以我将把它留给你。 </p> <p>我确实建议您在 iframe 隐藏时放置一个加载程序来代替它。 </p> <pre><code>#asContainer { display: none; } $(document).ready(function() { $(&#39;#asContainer&#39;).attr(&#34;src&#34;, &#34;//audio-surf.com/mypage.php?u=DJDavid98#favorites_container&#34;).on(&#39;load&#39;, function() { $(this).show(); }); }); </code></pre> </answer> <answer tick="false" vote="1"> <p>对此您无能为力。问题在于您使用锚点移动页面链接到源站点的方式。使用普通网站进行演示:</p> <pre><code>$(document).ready(function(){ $(&#39;#asContainer&#39;).attr(&#34;src&#34;,&#34;http://www.lolwut.com&#34;); }); </code></pre> <p><a href="http://jsfiddle.net/WGZUj/" rel="nofollow">http://jsfiddle.net/WGZUj/</a></p> <p>使用您尝试嵌入的网站进行演示:</p> <pre><code>$(document).ready(function(){ $(&#39;#asContainer&#39;).attr(&#39;src&#39;,&#39;//audio-surf.com/mypage.php?u=DJDavid98#favorites_container&#39;); }); </code></pre> <p><a href="http://jsfiddle.net/UZZ4c/" rel="nofollow">http://jsfiddle.net/UZZ4c/</a></p> <p>理论上解决这个问题的一种策略是检测 iframe 何时加载,然后移回到原始位置,但这是不可能做到的。</p> </answer> <answer tick="false" vote="0"> <p>我想出了一种不太传统的方法,它肯定有一些缺点。</p> <p>首先,缺点:在任何应用此解决方案的页面上,它将阻止您有效地在网址中使用哈希来向下滚动到元素,并且<pre><code>scrollIntoView</code></pre>也会被阻止/影响。</p> <p>该方法是在父文档上使用 CSS <pre><code>scroll-padding-top</code></pre> 属性,该属性具有足够大的值,以便“填充”将滚动位置推回到页面的最顶部,从而防止散列滚动到任何地方。根据页面的设置方式,样式可以应用于文档的 html 标签,如下所示:</p> <pre><code>&lt;style&gt; html { scroll-padding-top: 99999px; } &lt;/style&gt; </code></pre> <p>如果您知道 iframe 将在距页面顶部的距离内呈现,您也可以将其设置为较小的值,例如 <pre><code>200px</code></pre>。</p> </answer> </body></html>

回答 0 投票 0

嵌入式 Vimeo 视频在移动设备上的位置不同

我无法将嵌入的 Vimeo iframe 正确放置在移动设备上(在 iPhone 12 上测试)。由于某种原因,它部分隐藏在网站顶部的菜单下,并且 sm...

回答 1 投票 0

为什么我的 iframe 在重要性应用于溢出-y CSS 后无法正确滚动

添加overflow-y:scroll!对iframe的css很重要之后,我仍然无法实现y轴滚动条功能。这是一个主要问题,因为 iframe 中的表单无法完成...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.