<template>
<div class="safari-iframe">
<iframe :src="url" @load="onLoad" ref="iframe"></iframe>
</div>
</template>
<script>
export default {
name: 'SafariIFrame',
props: ['url', 'onFrameLoad'],
data() {
return {
isLoadComplete: false
}
},
methods: {
onLoad() {
if (!this.isLoadComplete) {
this.isLoadComplete = true;
if (this.onFrameLoad) {
this.onFrameLoad();
}
}
}
}
}
</script>

在使用 Safari 瀏覽器中，如果要嵌入一個 Vue 組件中的 iframe，可能會出現加載 iframe 內容不完整的問題。這是因為 Safari 瀏覽器會在完成 iframe 加載后還會進行一次優化處理，但是這個處理可能會影響 iframe 加載完整的時間。

為了解決這個問題，在 Vue 組件中可以使用上面代碼所示的 SafariIFrame 組件。它會在 iframe 完成加載后觸發一個回調函數，而不管 Safari 是否已經完成了優化處理。可以通過 props 傳入 iframe 的鏈接和回調函數。組件的實現非常簡單，只需要在 onload 回調函數中判斷是否已經完成加載即可。

使用方法非常簡單，只需要在 Vue 組件中引入 SafariIFrame 組件，然后在需要嵌入 iframe 的地方按照下面的方式使用即可：

<safari-iframe :url="yourIframeUrl" @onFrameLoad="yourFrameLoadFunction"></safari-iframe>

其中的 yourIframeUrl 和 yourFrameLoadFunction 分別代表你要加載的 iframe 地址和 iframe 加載完成后要執行的回調函數。