Safari 从 .AVIF 回退到 .GIF 使用 <picture> 标签不起作用
问题描述 投票：0回答：0
说明： 我试图在 Chrome 和更新的浏览器上显示 .AVIF 图像，同时在 Safari 等不正确支持 .AVIF 图像的浏览器上显示 .GIF 图像。但是，在 Safari 上，仍然请求 .AVIF 图像，并且在图像应显示的位置显示空白区域。此问题发生在 Safari（PC + 移动设备）上。
代码：
<picture>
<source type="image/avif" srcset="https://overpadel.nl/wp-content/uploads/browser-test1.avif" />
<source type="image/gif" srcset="https://overpadel.nl/wp-content/uploads/browser-test1.gif" />
<img src="https://overpadel.nl/wp-content/uploads/browser-test1.gif" alt="" />
</picture>
问题： 关于如何让 .GIF 图像而不是 .AVIF 图像显示在 Safari 上的任何提示？我错过了什么？
最新问题
- 无法在地图中插入键和值
- 如何在ROS2 eloquent中应用断言？
- 使用 firebase 部署 next.js 项目后，移动版网站上显示错误的颜色
- 使用装饰器自动继承父类
- co_reutrn之后协程帧是否自动销毁并释放（即释放分配的帧？）？
- 如何在jupyter中编写LaTeX（不仅仅是方程）
- 尝试使用异步函数，以便执行等待，直到子窗口使用嵌入式 JavaScript 关闭
- Raspberry Pi 和 A9g 模块
- 如何在 lambda 函数中解包变量？
- 无法在映射中插入键和值
- 按住按键时事件侦听器延迟
- 带有 Kafka 流 api 的 Java 代码帮助 WindowBy
- 清除iframe内容（包括它的JS全局范围）你好世界<\/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>
- 将iron-session与NextJS和新的应用程序路由器一起使用
- customtkinter 和 Pandas 之间的性能问题
- 错误：`headers` 在请求范围之外被调用
- R - 跨多个变量删除字符串的一部分
- Chrome 扩展：获取上次使用的选项卡
- X2GO 访问笔记本电脑麦克风
- 如何使用 Core Data 和 Objective-C 创建 NSManagedObjects 属性的简单数据库表？
© www.soinside.com 2019 - 2024. All rights reserved.