반응형
어떻게 하면 iframes를 백그라운드에서 살려둘 수 있을까?
나는 iframes가 2개인 간단한 Vue.js 앱을 가지고 있다.
Vue Router를 사용하여 두 iframes 간에 전환하고 싶지만 iframes를 백그라운드에서 "alive" 상태로 유지하여 매번 iframe을 다시 로드할 필요가 없도록 하고 싶다.
왜 다음의 바이올린들이 작동하지 않는지 아십니까?(뒤로 전환할 때마다 iframes를 다시 로드하도록 설정)
http://jsfiddle.net/c3umtepz/1/
<div id="app">
<router-link to="/">/youtube.com</router-link>
<router-link to="/foo">/adobe.com</router-link>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
여기서 keep-alive는 작동하지 않는다. 해결책은v-show
오직 옳다
keep-alive 원칙은 노드 정보를 VNode(메모리)의 구성요소에 보관하고 렌더링이 필요할 때 VNode에서 실제 DOM으로 렌더링하는 것이다.iframe 페이지의 콘텐츠는 노드의 정보에 속하지 않으므로 keep-alive를 사용하면 iframe의 콘텐츠가 여전히 다시 렌더링된다.
참조URL: https://stackoverflow.com/questions/45662534/how-can-i-keep-iframes-alive-in-the-background
반응형
'IT이야기' 카테고리의 다른 글
계산된 속성이 읽기 전용 입력에서 업데이트되지 않음 (2) | 2022.03.30 |
---|---|
파일 업로드(vuetify) (0) | 2022.03.29 |
라우터 + Redex 반응 - 경로 변경 시 비동기 작업을 전송하시겠습니까? (0) | 2022.03.29 |
Vue.js에서 임의 요소를 가져오는 방법 (0) | 2022.03.29 |
기능이 소품으로 전달될 때 Array.map의 반응 기능 구성 요소가 항상 리렌더링됨 (0) | 2022.03.29 |