如何防止 HTML 具有绑定数据属性的对象元素在 "samsung internet" 浏览器全屏后刷新

Question

我在 Vue 组件中绑定了一个 HTML 对象元素的数据属性，并且我有一个全屏按钮可以在全屏模式下显示我的对象。

在 chrome 或其他浏览器中没有问题，但是当我尝试在三星互联网浏览器上以全屏模式显示我的对象时，我的对象会重新连接并且我必须刷新页面。

我看过 "gameLink" 并且它在 "toggleFullScreen" 上从未改变，它只在初始化时在创建的挂钩上改变一次。

如何防止它重新连接？

代码如下：

        <b-nav-form>
            <b-button id="fullscreen-btn" @click="toggleFullScreen">
                <font-awesome-icon icon="expand" />
            </b-button>  
            <b-tooltip target="fullscreen-btn" placement="bottom" variant="warning">Full screen</b-tooltip>
        </b-nav-form>

。 . . .

    <div class="game-screen-size">
        <div id="target" style="width:100%; height:100%;">
             <div v-if="fullscreen" style="position:fixed; top:15px; left:50%; z-index:1500">
                <b-button id="compress-btn" @click="toggleFullScreen">
                    <font-awesome-icon icon="compress" />
                </b-button>  
                <b-tooltip target="compress-btn" placement="bottom" variant="warning">Normall view</b-tooltip>
            </div>
            <object type="text/html" class="game-screen" :data="gameLink"></object>
        </div>
    </div>

。 . . .

computed: {
    ...mapState("playGame", ["status", "gameLink", "userGameInfo", "activeTables", "emptyTables"]),
  },
methods: {
   ...mapActions("playGame", ["play", "userInfo", "tablesData"]),
    toggleFullScreen () {
        // toggle full screen using screenfull
        const element = document.getElementById('target');
        screenfull.toggle(element);
        this.fullscreen = !this.fullscreen;
      },
   }
created() {
    //gets the link and sets the gameLink on vuex store
    this.play();
}

.....

问题视频：

https://youtu.be/uIZuFwRqMKQ

Answer 1

我使用 iframe 而不是对象，问题已解决！

如何防止 HTML 具有绑定数据属性的对象元素在 "samsung internet" 浏览器全屏后刷新

how to prevent HTML object element with binded data attribute from refreshing after full screen on "samsung internet" browser

html

javascript

object

fullscreen

vue.js