iframe 相关问题

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

Fancybox v5，如何使用多个 IFRAME 链接在关闭时重新加载到不同的 url？在 fancybox 上使用 $_GET

目标：链接到 IFRAME 页面以获取 GET 值的多个按钮，并且可以在关闭后重新加载到不同页面。目标：链接到 IFRAME 页面以获取 GET 值的多个按钮，并且可以在关闭后重新加载到不同页面。 <a id='DeleteButton-1' href='delete_email.php?EmailID=1' data-fancybox data-type='iframe'>1</a> <a id='DeleteButton-2' href='delete_email.php?EmailID=2' data-fancybox data-type='iframe'>2</a> <a id='DeleteButton-3' href='delete_email.php?EmailID=3' data-fancybox data-type='iframe'>3</a> 在 delete_email.php 上，我分配 $_GET 值，然后从 EmailID 中删除 MySQL 记录。在 Fancybox v3 上，我可以分配不同的 fancybox 绑定以在关闭后转到不同的页面。 <a href='delete_email.php?EmailID=1' data-fancybox='DeleteEmail' data-type='iframe'>1</a> <a href='delete_email.php?EmailID=2' data-fancybox='DeleteEmail' data-type='iframe'>2</a> <a href='delete_email.php?EmailID=3' data-fancybox='DeleteEmail' data-type='iframe'>3</a> <a href='show_email.php?EmailID=1' data-fancybox='ShowEmail' data-type='iframe'>1</a> <a href='show_email.php?EmailID=2' data-fancybox='ShowEmail' data-type='iframe'>2</a> Fancybox.bind('[data-fancybox="DeleteEmail"]', { on: { close: () => { location.href = 'email_trash.php'; } } }); Fancybox.bind('[data-fancybox="ShowEmail"]', { on: { close: () => { location.href = 'email_inbox.php'; } } }); 问题是，Fancybox v5正在使用fancybox绑定DeleteEmail获取所有url并删除它们，而不是传递的单个EmailID。我认为它将它们视为像“画廊”一样的“组”，并将所有ID带到更新数据库。我已经使用版本 3.5.7 与 5.0.36 验证了这一点。我可以对所有内容进行默认绑定以重新加载到不同的页面，但如果我有“查看”按钮和“删除”按钮，则这不起作用。 Fancybox.bind('[data-fancybox]', { on: { "destroy": (fancybox, eventName) => { location.href = 'email_index.php'; }, }, }); 我可以绑定一个特定的ID来将该按钮发送到特定的页面.... Fancybox.bind(document.getElementById("DeleteButton-1"), "[data-fancybox]", //redirect Fancybox.bind(document.getElementById("DeleteButton-2"), "[data-fancybox]", //redirect Fancybox.bind(document.getElementById("DeleteButton-3"), "[data-fancybox]", //redirect 但是，如果您有数百个按钮，这不是一个好主意。所以我的问题是.... 是否有类似“类”的东西，我可以分配一组按钮，以便它知道要重新加载/重定向到哪个页面？所以关闭后查看按钮将转到 xxx.php，删除按钮将转到 yyy.php 页面？是否有更好的方法将值（例如 EmailID）传递到 IFRAME 页面，而不是使用 URL 中的 $_GET？感谢您的帮助！我建议添加不同的数据属性来指示操作，并使用“关闭”事件来检查： Fancybox.bind('[data-fancybox]', { on: { "close": (fancybox) => { // This is the element that launched Fancybox when clicked. // Check `dataset`, `classname`, etc and decide what to do next console.log(fancybox.options.triggerEl); }, } });

jquery iframe fancybox

回答 1 投票 0

尽管对存储访问 API 的支持有限，但仍将 LocalStorage 数据传输到新域

我在 Github Pages 上托管了一个没有自定义域的网站（例如 auroratide.github.io/my-website），现在我想将其移动到自定义域（例如 my-website.com）。网站保存数据...

javascript iframe local-storage cross-domain github-pages

回答 1 投票 0

每次内容变化时调整 Iframe 高度

我见过类似的问题，例如调整 iframe 的宽度和高度以适应其中的内容，但我认为我的问题不同。我在 Iframe 中有一个表格和几个搜索字段，我的搜索...

javascript html iframe datatables

回答 1 投票 0

如何在 iframe 内使用 playwright 运行 TypeScript 函数？

const iframeElement =等待page.locator('#bucketFrame'); const iframe = 等待 iframeElement.contentFrame(); 期望(iframe).not.toBeNull(); const PixelPosition = 等待 iframe.evaluate(({

typescript iframe playwright playwright-typescript

回答 1 投票 0

如何将 iframe 居中并使其全高可见且响应灵敏

我的页面分为两个部分，如所附的屏幕截图所示。该页面按照我想要的方式响应。正如您所看到的，问题是 iframe 没有显示完整的内容

css iframe flexbox

回答 1 投票 0

如何高效更新<iframe/> HTML 元素中的 DOM（使用 srcdoc）

我正在使用vuejs框架 ...进口常量 html = 参考( ``<!doctype> .... …… <</desc> <question vote="0"> <p>我正在使用vuejs框架</p> <pre><code><template> <iframe :srcdoc="html"></iframe> </template> </code></pre> <pre><code><script> ...import const html = ref( `<!doctype> .... ..... <style>style-1</style> <style>style-2</style> <body> symbolic </body> ` ) </script> </code></pre> <p>我只想更新“style-2”，但 html 是字符串变量，当 style-2 更改时它会做出反应，所以如果 html 很大，我的应用程序会变慢并中断。</p> <p>我该如何改进，谢谢</p> </question> <answer tick="false" vote="0"> <p>很高兴您意识到性能问题！:) 为了提高性能并避免在仅更新 HTML 字符串的一部分时出现反应性问题，您可以使用 <pre><code>computed</code></pre> 属性来动态更新特定部分。</p> <pre><code><template> <iframe :srcdoc="computedHtml"></iframe> </template> <script setup lang="ts"> import { ref, computed } from 'vue'; const staticHtmlStart = ` <!doctype html> <html> <head> <style>style-1</style> </head> <body> ` const staticHtmlEnd = ` </body> </html>` const dynamicStyle = ref('style-2') const computedHtml = computed(() => `${staticHtmlStart} <style>${dynamicStyle.value}</style> ${staticHtmlEnd}`) </script> </code></pre> <p>现在反应性很好，保存了性能，没有中断和重新渲染。</p> </answer> </body></html>

javascript vue.js performance iframe

回答 0 投票 0

水平居中嵌入Google Doc？

我是 HTML 和 CSS 新手，一直在通过 HTML for dummies 学习。不管怎样，我想知道如何水平居中嵌入的谷歌文档。 div#iframe-wrapper iframe {

html css iframe

回答 2 投票 0

有没有办法用javascript创建VPN？

我正在尝试使用 javascript、HTML 和 CSS 创建 VPN。我目前只使用 iframe，但它只能绕过 wifi 代理，然后一些网站将拒绝与 X-Frame-Opti 连接...

javascript html iframe vpn

回答 3 投票 0

构建Javascript SDK

我正在做一个项目，是支付方式，类似于stripe、paystack。我面临的唯一问题是我不知道如何将 javascript SDK 构建为 iframe。我熟悉 JavaScrip...