Skip to content

Change iframe src more than once , will not back to previous page #1917

Closed
@Roamin

Description

@Roamin

Version

3.0.1

Reproduction link

http://jsbin.com/hikorawipa/edit?html,output

Steps to reproduce

  • Home to Iframe
  • Click Bootstrap, loaded
  • Click Vue, loaded
  • Click Back button(go(-1)), will not back to Home, but the Bootstrap

bug

What is expected?

Do not push iframe history into router

What is actually happening?

If change iframe src more than once (loaded), then go(-1) will not back to previous page


  • find in v2.2.0, v3.0.1 too
  • Chrome 62.0.3202.94

Activity

posva

posva commented on Dec 2, 2017

@posva
Member

It looks like iframes are creating entries in the history: https://stackoverflow.com/questions/14737365/modify-iframe-src-without-entry-to-history-object
so, it's normal that the back button goes back
You can get around this by using a key attribute on the iframe or changing your set method to replace the location:

set(src) {
  this.$refs.iframe.contentWindow.location.replace(src)
}
Roamin

Roamin commented on Dec 4, 2017

@Roamin
Author

It works, thanks !

mikermcneil

mikermcneil commented on Apr 9, 2018

@mikermcneil

One important thing to note, that might seem obvious, but is easy to miss: you'll need to make the key dynamic.

For example:

<iframe :src="jotformSrc" :key="'jotform-iframe-'+jotformSrc"></iframe>

i.e. we made the dynamic key contain the current src as a suffix

Roamin

Roamin commented on Apr 10, 2018

@Roamin
Author

Oh, it works too!
It will force replacement of an element

tlzzu

tlzzu commented on Dec 3, 2018

@tlzzu

这种对于富文本编辑器有什么解决办法吗?比如UE这种,初始化后会在页面上画出(没有src地址)一个iframe,此时路由切换回来时会刷新iframe,导致内容清空。。。

aacassandra

aacassandra commented on Jul 9, 2019

@aacassandra

you can use v-bind:src or :src on iframe.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @mikermcneil@posva@Roamin@tlzzu@aacassandra

        Issue actions

          Change iframe src more than once , will not back to previous page · Issue #1917 · vuejs/vue-router