safari 相关问题

Safari 开发者工具：如何在导航时保留控制台登录？

当使用 Safari Web Inspector 读取 JavaScript 控制台输出时，日志会在导航时重置，即从页面 index.html 转到 mail.html 会清除控制台输出。在 Chrome 开发者中

Safari：重新加载后“由于访问控制检查，Fetch API 无法加载”

我在 Safari 的 CORS 系统中遇到了一些奇怪的行为。 我有一个从 JS Fetch API 发送的 POST 请求，如下所示： const res = 等待 fetch('http://localhost:8888/myPath', { 方法：...

在 Safari 中通过 Blob URL 加载音频失败

以下代码适用于 Chrome (22.0)，但不适用于 Safari (6.0) 函数 onGo(e) { var fr = new FileReader(); var 文件 = 文档。</desc> <question vote="19"> <p>以下代码适用于 Chrome (22.0)，但不适用于 Safari (6.0)</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script&gt; function onGo(e) { var fr = new FileReader(); var file = document.getElementById(&#34;file&#34;).files[0]; fr.onload = function(e) { var data = new Uint8Array(e.target.result); var blob = new Blob([data], {type: &#39;audio/mpeg&#39;}); var audio = document.createElement(&#39;audio&#39;); audio.addEventListener(&#39;loadeddata&#39;, function(e) { audio.play(); }, false); audio.addEventListener(&#39;error&#39;, function(e) { console.log(&#39;error!&#39;, e); }, false); audio.src = webkitURL.createObjectURL(blob); }; fr.readAsArrayBuffer(file); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;input type=&#34;file&#34; id=&#34;file&#34; name=&#34;file&#34; /&gt; &lt;input type=&#34;submit&#34; id=&#34;go&#34; onclick=&#34;onGo()&#34; value=&#34;Go&#34; /&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>在 Safari 中，不会调用任何回调（loadeddata 或 error）。 使用的内容是mp3文件，通常使用音频标签进行播放。 Safari 需要什么特别照顾吗？</p> </question> <answer tick="false" vote="17"> <p>很多年后，我相信OP中的例子应该可以正常工作。只要您在创建 blob 时以某种方式设置 mime 类型，就像上面的 OP 使用传入选项的 type 属性所做的那样：</p> <pre><code>new Blob([data], {type: &#39;audio/mpeg&#39;}); </code></pre> <p>您还可以在音频元素内部使用 <pre><code>&lt;source&gt;</code></pre> 元素，并设置 <pre><code>type</code></pre> 元素的 <pre><code>&lt;source&gt;</code></pre> 属性。我这里有一个例子：</p> <p><a href="https://lastmjs.github.io/safari-object-url-test" rel="noreferrer">https://lastmjs.github.io/safari-object-url-test</a></p> <p>这是代码：</p> <pre><code>const response = await window.fetch(&#39;https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Alexander_Graham_Bell%27s_Voice.ogg/Alexander_Graham_Bell%27s_Voice.ogg.mp3&#39;); const audioArrayBuffer = await response.arrayBuffer(); const audioBlob = new Blob([audioArrayBuffer]); const audioObjectURL = window.URL.createObjectURL(audioBlob); const audioElement = document.createElement(&#39;audio&#39;); audioElement.setAttribute(&#39;controls&#39;, true); document.body.appendChild(audioElement); const sourceElement = document.createElement(&#39;source&#39;); audioElement.appendChild(sourceElement); sourceElement.src = audioObjectURL; sourceElement.type = &#39;audio/mp3&#39;; </code></pre> <p>我更喜欢在创建 blob 时设置它的 mime 类型。 <pre><code>&lt;source&gt;</code></pre> 元素 <pre><code>src</code></pre> 属性/属性无法动态更新。</p> </answer> <answer tick="false" vote="5"> <p>我有同样的问题，我已经花了几天时间来解决这个问题。 正如 <strong>pwray</strong> 在另一篇文章中提到的，Safari 需要媒体请求的文件扩展名：</p> <p><a href="https://stackoverflow.com/questions/4201576/html5-audio-files-fail-to-load-in-safari#">HTML5 音频文件无法在 Safari 中加载</a></p> <p>我尝试将我的 blob 保存到一个文件中，将其命名为 file.mp3，Safari 能够以这种方式加载音频，但在我将文件重命名为没有扩展名（只是“文件”）后，它无法加载。 当我在 Safari 的另一个选项卡中尝试从 blob 创建的 url 时：</p> <pre><code>url = webkitURL.createObjectURL(blob); </code></pre> <p>它立即下载一个名为“未知”的文件，但是当我在 Chrome（也在 Mac 上）中尝试相同的操作时，它在浏览器中显示了该文件的内容（mp3 文件以 ID3 开头，然后是一堆非可读字符）。 我还不知道如何强制由 blob 组成的 url 具有扩展名，因为通常它看起来像这样：</p> <pre><code>blob:https://example.com/a7e38943-559c-43ea-b6dd-6820b70ca1e2 </code></pre> <p>所以它的结尾看起来像一个会话变量。</p> <p>这就是我陷入困境的地方，我真的很希望看到这里一些聪明人的解决方案。 谢谢， 史蒂文</p> </answer> <answer tick="false" vote="0"> <p>有时，HTML5 音频可能会在没有任何明显原因的情况下停止加载。 如果您查看媒体事件 (<a href="http://www.w3schools.com/tags/ref_eventattributes.asp" rel="nofollow">http://www.w3schools.com/tags/ref_eventattributes.asp</a>)，您将看到一个名为：“<strong>onStalled</strong>”的事件，定义是“要运行的脚本”当浏览器因某种原因无法获取媒体数据时”，看起来它应该对您有帮助。</p> <p>尝试监听该事件并在必要时重新加载文件，如下所示：</p> <pre><code>audio.addEventListener(&#39;onstalled&#39;, function(e) { audio.load(); }, false); </code></pre> <p>希望对你有帮助！</p> </answer> <answer tick="false" vote="0"> <p>只需在音频中使用源标签即可。</p> <pre><code>&lt;audio controls&gt; &lt;source src=&#34;blob&#34; type=&#34;blobType&#34;&gt; &lt;/audio&gt; </code></pre> </answer> <answer tick="false" vote="0"> <p>这对我有用，Safari 和 chrome。</p> <pre><code> function getBlob(url: string): Promise&lt;Blob&gt; { return new Promise((resolve, reject) =&gt; { const xhr = new XMLHttpRequest(); xhr.responseType = &#39;blob&#39;; xhr.overrideMimeType(&#39;audio/mp3&#39;); xhr.onload = (event) =&gt; { var blob = xhr.response; resolve(blob); }; xhr.onerror = (event) =&gt; { reject(event); }; xhr.open(&#39;GET&#39;, url); xhr.send(); }); } </code></pre> <p>函数获取blob，safari的技巧是覆盖请求中的文件类型，xhr.overrideMimeType('audio/mp3');</p> <p>然后将其与您要播放的 URL 音频以异步方式调用</p> <pre><code>const blob = await this.getBlob(url); const source = URL.createObjectURL(blob); const audio = new Audio(source); audio.load(); audio.play(); </code></pre> </answer> </body></html>

Safari 的 Cookie，Safari Cookie 问题在 Safari 关闭和打开时删除 Cookie

我有一个基于php的系统，在chromeda中没有问题，但在safari中不保留cookie，在safari的cookie系统中我应该注意什么，我该如何解决这个问题？ 德勒...

iPhone 存储网站图标，即使它已更新且缓存/历史记录已清除

我的 iPhone XS (Safari) 上显示的图标不正确。如果我为网站添加书签或添加到收藏夹，则会显示新的/正确的图像，但如果我单击“选项卡”图标，您会在其中看到所有打开的内容...

iOS 12 safari 滚动时无法通过“touchmove”事件侦听器防止捏合缩放

我添加此代码 document.addEventListener('touchmove', 函数(事件) { if (event.touches.length > 1) { event.preventDefault(); event.stopPropagation(); } }, { 通过...

React 应用程序无法在 Safari 中运行。在 Chrome 和 FireFox 上工作正常，但为 safari 提供黑色布局

我的 React 应用程序适用于所有浏览器，但不适用于 MacOS 上的 Safari（Catalina OS 和版本 13.1.2 ）。我没有收到任何错误，没有控制台消息，没有任何信息可以给我一些想法。它只渲染...

Mac OSX Catalina - Safari 无法下载文件，可用空间充足时却不够

我在论坛和互联网上进行了搜索，但找不到我的问题的答案。 刚刚将我的 OSX 更新为 Catalina。我在使用 Safari 时遇到问题，当我尝试下载文件时，它显示...

Bootstrap 5 h-100 适用于 Chrome，但不适用于 Safari 的图像组

请参考问题：Bootstrap 5 Padding throwing off Aspect Ratio For Group of Images 应用 h-100 的解决方案非常适合 Chrome。然而，当我在 safari 中查看解决方案时，...

如何删除输入（Safari）电子邮件和密码中保存的建议框？

游猎建议钥匙箱 输入右侧有一个带有按键的烦人框，无法在 safari 中将其删除。请帮助。 您可以查看图像并明白要点。 输入右侧有一个带有按键的烦人框，无法在 safari 中将其删除。请帮助。 您可以查看图像并明白要点。 <div> <label for="email">email:</label> <input name="email" id="user-email" autofocus required type="email" autocomplete="new-email" /> </div> <div> <label for="password">password:</label> <input name="password" id="user-password" required minlength="8" type="password" autocomplete="off" /> </div> 尝试过 autocomplete="new-email" ； autocomplete="off"，但它处理的事情与我想要的不同。 我认为你想要的是覆盖 Shadow dom 中定义的样式 例如 input::-webkit-credentials-auto-fill-button { background-image: url("data:image/svg+xml,%3Csvg xmlns%3D\"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\" …2.467 2.521c.171.171.36.256.565.256z\" opacity%3D\".75\"%2F%3E%3C%2Fsvg%3E"); width: 24px; height: 24px; margin-left: 2px; margin-right: 1px; mix-blend-mode: luminosity; flex-grow: 0; flex-shrink: 0; flex-basis: auto; -webkit-user-select: none; } 更多信息请点击此处。 覆盖影子根元素中的样式 另外，在我的例子中，内联样式的应用取决于焦点，例如 display: block !important; 和 display: none !important; 如果您只是想隐藏它，它使用 !important 的事实使得覆盖它变得有点棘手。 我的感觉是 safari 根据上下文添加这些值，即如果文本输入在同一字段集中添加密码，则它假定它是用户名，并添加图标以允许您填写钥匙链或类似内容。

iOS 调整对象大小问题

当调整具有适合对象定位的背景图像的图像内部元素的大小时，它会出现严重故障。这是一个 FIDDLE，它有一个适合对象定位的背景图像，并且它有一个 bor...

在 iOS Sarafi 中无法通过拖动/点击视频区域来滚动我的网页

我制作了基于角度的网页，可以共享视频，但是通过拖动视频元素滚动页面在 iOS17 Safari 浏览器上不起作用。 Chrome 和 Mozilla 运行良好，没有任何问题。 我有

Safari 上静态网页自动缩放

当我在 Safari 上加载静态 HTML 网页时，浏览器会自动放大，以便我的用户获得水平滚动条。我在任何其他浏览器和设备上都没有遇到此问题。我已经...

现代浏览器中的跨站点身份验证，无需第 3 方 cookie

系统有多个部分位于不同的域（而不是子域）。在用户登录任何域后，我需要在所有域中对用户进行身份验证，而无需用户进行任何交互。 在...

javascript Safari 中的音频可视化不适用于互联网广播流（Icecast/shoutcast）[重复]

任何人都可以帮我检查为什么这段代码在 Safari (osx) 中不起作用吗？ 正在播放音频，但没有可视化。 我尝试了找到的所有提示，但仍然没有运气。 需要提一下它的工作...

Google“保存到云端硬盘”按钮在 Chrome、Chromium 或 Safari 中不起作用

根据官方文档，以下代码应生成一个有效的“保存到云端硬盘”按钮： </script&...</desc> <question vote="0"> <p>按照<a href="https://developers.google.com/drive/api/guides/savetodrive" rel="nofollow noreferrer">官方文档</a>，以下代码应生成一个有效的“保存到云端硬盘”按钮：</p> <pre><code>&lt;script src=&#34;https://apis.google.com/js/platform.js&#34; async defer&gt;&lt;/script&gt; &lt;div class=&#34;g-savetodrive&#34; data-src=&#34;//example.com/path/to/myfile.pdf&#34; data-filename=&#34;My Statement.pdf&#34; data-sitename=&#34;My Company Name&#34;&gt; &lt;/div&gt; </code></pre> <p>这个变体已经在所有相关浏览器中为我们工作了好几年了。在过去几个月的某个时候，它在 Chrome、Chromium 和 Safari 中停止工作，但在 Firefox 中仍然可以正常工作。</p> <p>在所有浏览器中，按下按钮都会弹出一个弹出窗口，允许您在 Google 云端硬盘中设置目的地。选择目的地后，按“保存”，弹出窗口就会消失。在 Firefox 中，您会在“保存到云端硬盘”按钮所在的位置看到彩色动画，完成后，它会告诉您文件的保存位置并为您提供一个链接。在 Chrome、Chromium 和 Safari 中，弹出窗口消失，然后什么也没有发生。该文件没有出现在目标位置，并且 JavaScript 控制台中没有可见错误。</p> <p>在 Chromium 中，我尝试清除浏览器缓存、禁用广告拦截器 (uBlock Origin) 并将安全设置切换为“无保护”，但这些都没有产生任何影响。</p> <p>生产版本嵌入在 Drupal Web 表单中，但为了排除这一影响因素，我制作了一个简单的静态站点，其中包含以下代码：</p> <pre><code>&lt;script src=&#34;https://apis.google.com/js/platform.js&#34; async defer&gt;&lt;/script&gt; &lt;div class=&#34;g-savetodrive&#34; data-src=&#34;/blankfile.txt&#34; data-filename=&#34;blankfile.txt&#34; data-sitename=&#34;ASC D10 Placeholder&#34;&gt; &lt;/div&gt; </code></pre> <p>这会产生相同的行为。它可以在 Firefox 中运行，但不能在我测试过的其他浏览器中运行。</p> <p>还有其他人遇到这个问题吗？您知道修复或解决该问题的方法吗？</p> </question> <answer tick="false" vote="0"> <p>问题已解决。我不知道谷歌端或浏览器是否发生了变化，但今天又开始工作了。</p> </answer> </body></html>

Favicon 未在 Safari 中显示

我已经在网上搜索过了，但我仍然不知道为什么favicon在safari上不会显示，在chrome和FF上显示正常， 我已经在标题中尝试过这些： 我已经在互联网上搜索过了，但我仍然不知道为什么 favicon 在 safari 上不会显示，在 chrome 和 FF 上显示正常， 我已经在标题中尝试过这些： <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 或者这个 <link rel="shortcut icon" href="favicon.ico?23189123" type="image/x-icon"/> 将图标更改为 32 位，或从 safari 库中删除 WebpageIcons.db 等。 我检查浏览器堆栈上的网站，以防是我的缓存.. 我还有什么遗漏的吗？请让我知道任何建议，提前谢谢。 Safari 使用“apple-touch-icon”而不仅仅是“icon”。此外，如果您希望所有 Apple 设备都显示该图标，则必须指定该图标。 在此处阅读更多内容https://css-tricks.com/favicon-quiz/ 使用 https://favicon.io/ 并使用您的 favicon 图像生成 html 代码片段和文件集。 在我的 Ubuntu 机器上开发 Next.js 项目期间，我遇到了类似的问题，即 favicon 没有出现在 Safari 中。我发现了一个解决这个问题的解决方案，概述了here以供本地开发。 此外，为了确保网站图标在现场环境（例如登台或生产）中正确显示，我必须进行额外的配置。我按照 this 指南中的建议添加了属性 crossorigin="use-credentials"。

我可以在 Safari 上的 MS Powerpoint 插件的对话框 API 中使用 Firebase 的 signinWithRedirect 吗？

我正在使用 Firebase 为 MS Powerpoint 插件开发身份验证。为了添加 Google 身份验证，我创建了一个打开对话框的按钮： `函数 openGoogleAuthDialo...

Safari 文本阴影错误？

我遇到一个问题，Safari 无法像 chrome 或 ff 那样在自定义字形图标上渲染完整的文本阴影。我附上按钮的图像。 你知道是否有任何已知的错误或任何...

如何避免 Safari 将 -apple-system-blue 添加到我的按钮

我正在通过我的离子应用程序中的 iFrame 加载网站。 我发现每个按钮都变成了蓝色。 我搜索了一下，发现 safari 添加了以下代码。 按钮 { 颜色：...