The iframe stopped when hidden

up vote
0
down vote

favorite

I'm writing a live video website, which use a third-party tools to play the video.

To simplify my problem, I embedded all the live video components into a single HTML page. It looks like this.

<iframe data-v-140cfad2="" width="800" height="500" src="/backend/render/live?uid=047a911d83&amp;vid=254084" id="haha"></iframe>

When the page was loaded, it played video normally. However, I write following commands in Chrome console.

a = document.getElementById('haha')

a.hidden = true;//or a.style.display = 'none'

Not only the video window disappeared (as I wish), the audio disappeared (that is not I want). I don't know how It stopped, and if there is any way can still run the video in the background.

Update :

Change the size of iframe into 0px * 0px is a way to move the iframe into background. However it does not fit my situation.

I was using vue.js & element-ui. The iframe was inside a el-tabs components, which means all the hidden operations was automatically done after the tab change. I don't know how to prevent such default operation.

A demo of my project

Backend iframe code :

(() => {

        window.onload = function() {

                let ctx = document.getElementById('player');

                let uid = ctx.getAttribute('uid');

                let vid = ctx.getAttribute('vid');

                let cfg = {

                        uid: uid,

                        vid: vid,

                        height: 500,

                        width: 800,

                };

                console.log(">>>",cfg);

                player = polyvObject('#player').

                        livePlayer(cfg);

        }

})();

<!DOCTYPE html>

<html>



<head>

  <script src="http://player.polyv.net/script/player.js"></script>

  <script src="http://player.polyv.net/livescript/liveplayer.js"></script>

  <script src="/backend/js/live.js"></script>

  <link rel="stylesheet" href="/backend/css/live.css">

</head>



<body>

  <div id="player" uid="#{uid}" vid="#{vid}"></div>

</body>



</html>

This bug will not happen when iframe embed a MP4 file, or a normal web page. Only happens on my own page. (that strange, because I don't understand how the functions INSIDE the iframe was trigger by the hidden style OUTSIDE iframe).

I solve this problem by modifying the element-ui components to avoid using v-show when hiding components. Details show in the solution posted by myself.

Thanks for all people answering my problem :)

edited Nov 9 at 2:47

asked Nov 8 at 13:29

Toby Mao

156

You could position the video offscreen, or set its opacity to zero, or set visibility instead of display. But are you sure you want to keep audio autoplaying while hiding the controls that allow the user to stop that audio? That's going to drive a lot of users away from your site...
– Daniel Beck
Nov 8 at 13:46

As I mentioned in the update, I have a menu bar contains several different components. The video is one of them, the rest of them are something like chatting area or dashboard. I want user to switch between them without closing the video.
– Toby Mao
Nov 8 at 13:54

That's a completely different question, then, since it depends on how the element-ui tabs component handles its inactive tabs -- if they're not being drawn into the DOM at all, which is possible, you may need to use a different mechanism that hides them with v-show instead of v-if for example. (I don't know if element-ui supports this or if you'd need to modify or re-implement it.)
– Daniel Beck
Nov 8 at 14:13

I am now quit sure it is caused by the code in the third-party package inside iframe. Because neither the video nor the embedded web page in the iframe have such bug. But still figuring how the hidden operation outside the iframe triggers functions inside the iframe.
– Toby Mao
Nov 8 at 15:25

add a comment |

up vote
0
down vote

favorite

I'm writing a live video website, which use a third-party tools to play the video.

To simplify my problem, I embedded all the live video components into a single HTML page. It looks like this.

<iframe data-v-140cfad2="" width="800" height="500" src="/backend/render/live?uid=047a911d83&amp;vid=254084" id="haha"></iframe>

When the page was loaded, it played video normally. However, I write following commands in Chrome console.

a = document.getElementById('haha')

a.hidden = true;//or a.style.display = 'none'

Not only the video window disappeared (as I wish), the audio disappeared (that is not I want). I don't know how It stopped, and if there is any way can still run the video in the background.

Update :

Change the size of iframe into 0px * 0px is a way to move the iframe into background. However it does not fit my situation.

A demo of my project

Backend iframe code :

(() => {

        window.onload = function() {

                let ctx = document.getElementById('player');

                let uid = ctx.getAttribute('uid');

                let vid = ctx.getAttribute('vid');

                let cfg = {

                        uid: uid,

                        vid: vid,

                        height: 500,

                        width: 800,

                };

                console.log(">>>",cfg);

                player = polyvObject('#player').

                        livePlayer(cfg);

        }

})();

<!DOCTYPE html>

<html>



<head>

  <script src="http://player.polyv.net/script/player.js"></script>

  <script src="http://player.polyv.net/livescript/liveplayer.js"></script>

  <script src="/backend/js/live.js"></script>

  <link rel="stylesheet" href="/backend/css/live.css">

</head>



<body>

  <div id="player" uid="#{uid}" vid="#{vid}"></div>

</body>



</html>

I solve this problem by modifying the element-ui components to avoid using v-show when hiding components. Details show in the solution posted by myself.

Thanks for all people answering my problem :)

edited Nov 9 at 2:47

asked Nov 8 at 13:29

Toby Mao

156

You could position the video offscreen, or set its opacity to zero, or set visibility instead of display. But are you sure you want to keep audio autoplaying while hiding the controls that allow the user to stop that audio? That's going to drive a lot of users away from your site...
– Daniel Beck
Nov 8 at 13:46

As I mentioned in the update, I have a menu bar contains several different components. The video is one of them, the rest of them are something like chatting area or dashboard. I want user to switch between them without closing the video.
– Toby Mao
Nov 8 at 13:54

That's a completely different question, then, since it depends on how the element-ui tabs component handles its inactive tabs -- if they're not being drawn into the DOM at all, which is possible, you may need to use a different mechanism that hides them with v-show instead of v-if for example. (I don't know if element-ui supports this or if you'd need to modify or re-implement it.)
– Daniel Beck
Nov 8 at 14:13

I am now quit sure it is caused by the code in the third-party package inside iframe. Because neither the video nor the embedded web page in the iframe have such bug. But still figuring how the hidden operation outside the iframe triggers functions inside the iframe.
– Toby Mao
Nov 8 at 15:25

add a comment |

up vote
0
down vote

favorite

I'm writing a live video website, which use a third-party tools to play the video.

To simplify my problem, I embedded all the live video components into a single HTML page. It looks like this.

<iframe data-v-140cfad2="" width="800" height="500" src="/backend/render/live?uid=047a911d83&amp;vid=254084" id="haha"></iframe>

When the page was loaded, it played video normally. However, I write following commands in Chrome console.

a = document.getElementById('haha')

a.hidden = true;//or a.style.display = 'none'

Not only the video window disappeared (as I wish), the audio disappeared (that is not I want). I don't know how It stopped, and if there is any way can still run the video in the background.

Update :

Change the size of iframe into 0px * 0px is a way to move the iframe into background. However it does not fit my situation.

A demo of my project

Backend iframe code :

(() => {

        window.onload = function() {

                let ctx = document.getElementById('player');

                let uid = ctx.getAttribute('uid');

                let vid = ctx.getAttribute('vid');

                let cfg = {

                        uid: uid,

                        vid: vid,

                        height: 500,

                        width: 800,

                };

                console.log(">>>",cfg);

                player = polyvObject('#player').

                        livePlayer(cfg);

        }

})();

<!DOCTYPE html>

<html>



<head>

  <script src="http://player.polyv.net/script/player.js"></script>

  <script src="http://player.polyv.net/livescript/liveplayer.js"></script>

  <script src="/backend/js/live.js"></script>

  <link rel="stylesheet" href="/backend/css/live.css">

</head>



<body>

  <div id="player" uid="#{uid}" vid="#{vid}"></div>

</body>



</html>

I solve this problem by modifying the element-ui components to avoid using v-show when hiding components. Details show in the solution posted by myself.

Thanks for all people answering my problem :)

edited Nov 9 at 2:47

asked Nov 8 at 13:29

Toby Mao

156

I'm writing a live video website, which use a third-party tools to play the video.

To simplify my problem, I embedded all the live video components into a single HTML page. It looks like this.

<iframe data-v-140cfad2="" width="800" height="500" src="/backend/render/live?uid=047a911d83&amp;vid=254084" id="haha"></iframe>

When the page was loaded, it played video normally. However, I write following commands in Chrome console.

a = document.getElementById('haha')

a.hidden = true;//or a.style.display = 'none'

Not only the video window disappeared (as I wish), the audio disappeared (that is not I want). I don't know how It stopped, and if there is any way can still run the video in the background.

Update :

Change the size of iframe into 0px * 0px is a way to move the iframe into background. However it does not fit my situation.

A demo of my project

Backend iframe code :

(() => {

        window.onload = function() {

                let ctx = document.getElementById('player');

                let uid = ctx.getAttribute('uid');

                let vid = ctx.getAttribute('vid');

                let cfg = {

                        uid: uid,

                        vid: vid,

                        height: 500,

                        width: 800,

                };

                console.log(">>>",cfg);

                player = polyvObject('#player').

                        livePlayer(cfg);

        }

})();

<!DOCTYPE html>

<html>



<head>

  <script src="http://player.polyv.net/script/player.js"></script>

  <script src="http://player.polyv.net/livescript/liveplayer.js"></script>

  <script src="/backend/js/live.js"></script>

  <link rel="stylesheet" href="/backend/css/live.css">

</head>



<body>

  <div id="player" uid="#{uid}" vid="#{vid}"></div>

</body>



</html>

I solve this problem by modifying the element-ui components to avoid using v-show when hiding components. Details show in the solution posted by myself.

Thanks for all people answering my problem :)

<iframe data-v-140cfad2="" width="800" height="500" src="/backend/render/live?uid=047a911d83&amp;vid=254084" id="haha"></iframe>

<iframe data-v-140cfad2="" width="800" height="500" src="/backend/render/live?uid=047a911d83&amp;vid=254084" id="haha"></iframe>

(() => {

        window.onload = function() {

                let ctx = document.getElementById('player');

                let uid = ctx.getAttribute('uid');

                let vid = ctx.getAttribute('vid');

                let cfg = {

                        uid: uid,

                        vid: vid,

                        height: 500,

                        width: 800,

                };

                console.log(">>>",cfg);

                player = polyvObject('#player').

                        livePlayer(cfg);

        }

})();

<!DOCTYPE html>

<html>



<head>

  <script src="http://player.polyv.net/script/player.js"></script>

  <script src="http://player.polyv.net/livescript/liveplayer.js"></script>

  <script src="/backend/js/live.js"></script>

  <link rel="stylesheet" href="/backend/css/live.css">

</head>



<body>

  <div id="player" uid="#{uid}" vid="#{vid}"></div>

</body>



</html>

(() => {

        window.onload = function() {

                let ctx = document.getElementById('player');

                let uid = ctx.getAttribute('uid');

                let vid = ctx.getAttribute('vid');

                let cfg = {

                        uid: uid,

                        vid: vid,

                        height: 500,

                        width: 800,

                };

                console.log(">>>",cfg);

                player = polyvObject('#player').

                        livePlayer(cfg);

        }

})();

<!DOCTYPE html>

<html>



<head>

  <script src="http://player.polyv.net/script/player.js"></script>

  <script src="http://player.polyv.net/livescript/liveplayer.js"></script>

  <script src="/backend/js/live.js"></script>

  <link rel="stylesheet" href="/backend/css/live.css">

</head>



<body>

  <div id="player" uid="#{uid}" vid="#{vid}"></div>

</body>



</html>

javascript html dom iframe vue.js

edited Nov 9 at 2:47

asked Nov 8 at 13:29

Toby Mao

156

edited Nov 9 at 2:47

asked Nov 8 at 13:29

Toby Mao

156

edited Nov 9 at 2:47

asked Nov 8 at 13:29

Toby Mao

156

asked Nov 8 at 13:29

Toby Mao

156

asked Nov 8 at 13:29

Toby Mao

156

You could position the video offscreen, or set its opacity to zero, or set visibility instead of display. But are you sure you want to keep audio autoplaying while hiding the controls that allow the user to stop that audio? That's going to drive a lot of users away from your site...
– Daniel Beck
Nov 8 at 13:46

As I mentioned in the update, I have a menu bar contains several different components. The video is one of them, the rest of them are something like chatting area or dashboard. I want user to switch between them without closing the video.
– Toby Mao
Nov 8 at 13:54

That's a completely different question, then, since it depends on how the element-ui tabs component handles its inactive tabs -- if they're not being drawn into the DOM at all, which is possible, you may need to use a different mechanism that hides them with v-show instead of v-if for example. (I don't know if element-ui supports this or if you'd need to modify or re-implement it.)
– Daniel Beck
Nov 8 at 14:13

I am now quit sure it is caused by the code in the third-party package inside iframe. Because neither the video nor the embedded web page in the iframe have such bug. But still figuring how the hidden operation outside the iframe triggers functions inside the iframe.
– Toby Mao
Nov 8 at 15:25

add a comment |

You could position the video offscreen, or set its opacity to zero, or set visibility instead of display. But are you sure you want to keep audio autoplaying while hiding the controls that allow the user to stop that audio? That's going to drive a lot of users away from your site...
– Daniel Beck
Nov 8 at 13:46

As I mentioned in the update, I have a menu bar contains several different components. The video is one of them, the rest of them are something like chatting area or dashboard. I want user to switch between them without closing the video.
– Toby Mao
Nov 8 at 13:54

That's a completely different question, then, since it depends on how the element-ui tabs component handles its inactive tabs -- if they're not being drawn into the DOM at all, which is possible, you may need to use a different mechanism that hides them with v-show instead of v-if for example. (I don't know if element-ui supports this or if you'd need to modify or re-implement it.)
– Daniel Beck
Nov 8 at 14:13

I am now quit sure it is caused by the code in the third-party package inside iframe. Because neither the video nor the embedded web page in the iframe have such bug. But still figuring how the hidden operation outside the iframe triggers functions inside the iframe.
– Toby Mao
Nov 8 at 15:25

You could position the video offscreen, or set its opacity to zero, or set visibility instead of display. But are you sure you want to keep audio autoplaying while hiding the controls that allow the user to stop that audio? That's going to drive a lot of users away from your site...
– Daniel Beck
Nov 8 at 13:46

As I mentioned in the update, I have a menu bar contains several different components. The video is one of them, the rest of them are something like chatting area or dashboard. I want user to switch between them without closing the video.
– Toby Mao
Nov 8 at 13:54

That's a completely different question, then, since it depends on how the element-ui tabs component handles its inactive tabs -- if they're not being drawn into the DOM at all, which is possible, you may need to use a different mechanism that hides them with v-show instead of v-if for example. (I don't know if element-ui supports this or if you'd need to modify or re-implement it.)
– Daniel Beck
Nov 8 at 14:13

I am now quit sure it is caused by the code in the third-party package inside iframe. Because neither the video nor the embedded web page in the iframe have such bug. But still figuring how the hidden operation outside the iframe triggers functions inside the iframe.
– Toby Mao
Nov 8 at 15:25

add a comment |

3 Answers
3

active

oldest

votes

up vote
1
down vote

Hide the iFrame

.hiddeniFrame{

    width:0px;

    height:0px;

}

Or move it away off the screen

answered Nov 8 at 13:41

Gabriel Lopez

1945

Thanks for your suggestion, but as I mentioned in the new update. This is not quite implementable in my project. Is there any other solution?
– Toby Mao
Nov 8 at 13:58

Maybe apply position:fixed before tabChange to take the iFrame out of the Tabs , and when focusing on the tab return to the original position ?
– Gabriel Lopez
Nov 8 at 14:08

add a comment |

up vote
0
down vote

It should be backend issue, so it will be great to update question with iframe content. I've reproduce your situation audio still playing after hiding iframe

setTimeout(() => { document.getElementById('test').hidden = true; }, 10000 )

<iframe src="https://www.instagram.com/p/Bn5ar2uBd2C/embed/" width="640" height="880" id="test"></iframe>

edited Nov 8 at 14:30

answered Nov 8 at 14:10

Dim_K

549214

If I change the src into a normal video link, it works! But... I don't get that is there any difference between embedding a normal video or a web page inside an iframe.
– Toby Mao
Nov 8 at 14:25

@TobyMao i've updated code with embeded variant. Still works. Just start video manually before hiding in 10 secs. Btw may be manual start is a caus of work?
– Dim_K
Nov 8 at 14:31

add a comment |

up vote
0
down vote

accepted

At last, I solve my own problem by an ugly approach.

The iframe works fine when style visibility='hidden' was set. So I just rewrite the el-tab-pane in the element-ui.

The initial version of el-tab-pane was:

<template>

  <div

    class="el-tab-pane"

    v-if="(!lazy || loaded) || active"

    v-show="active"

    role="tabpanel"

    :aria-hidden="!active"

    :id="`pane-${paneName}`"

    :aria-labelledby="`tab-${paneName}`"

  >

    <slot></slot>

  </div>

</template>

A did a little modification as follow (the v-visible was contained by npm vue-visible package) [TabPane]

<template>

  <div

    class="el-tab-pane"

    v-if="(!lazy || loaded) || active"

    v-show="active || fly"

    v-visible="active || !fly"

    role="tabpanel"

    :aria-hidden="!active"

    :id="`pane-${paneName}`"

    :aria-labelledby="`tab-${paneName}`"

  >

    <slot></slot>

  </div>

</template>

In my own code, I replaced the el-tab-pane to my DIY TabPane, adding a props named fly to indicate whether to use v-show or the v-visible to hide the components.

answered Nov 9 at 2:39

Toby Mao

156

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53208742%2fthe-iframe-stopped-when-hidden%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

up vote
1
down vote

Hide the iFrame

.hiddeniFrame{

    width:0px;

    height:0px;

}

Or move it away off the screen

answered Nov 8 at 13:41

Gabriel Lopez

1945

Thanks for your suggestion, but as I mentioned in the new update. This is not quite implementable in my project. Is there any other solution?
– Toby Mao
Nov 8 at 13:58

Maybe apply position:fixed before tabChange to take the iFrame out of the Tabs , and when focusing on the tab return to the original position ?
– Gabriel Lopez
Nov 8 at 14:08

add a comment |

up vote
1
down vote

Hide the iFrame

.hiddeniFrame{

    width:0px;

    height:0px;

}

Or move it away off the screen

answered Nov 8 at 13:41

Gabriel Lopez

1945

Thanks for your suggestion, but as I mentioned in the new update. This is not quite implementable in my project. Is there any other solution?
– Toby Mao
Nov 8 at 13:58

Maybe apply position:fixed before tabChange to take the iFrame out of the Tabs , and when focusing on the tab return to the original position ?
– Gabriel Lopez
Nov 8 at 14:08

add a comment |

up vote
1
down vote

Hide the iFrame

.hiddeniFrame{

    width:0px;

    height:0px;

}

Or move it away off the screen

answered Nov 8 at 13:41

Gabriel Lopez

1945

Hide the iFrame

.hiddeniFrame{

    width:0px;

    height:0px;

}

Or move it away off the screen

answered Nov 8 at 13:41

Gabriel Lopez

1945

answered Nov 8 at 13:41

Gabriel Lopez

1945

answered Nov 8 at 13:41

Gabriel Lopez

1945

answered Nov 8 at 13:41

Gabriel Lopez

1945

Thanks for your suggestion, but as I mentioned in the new update. This is not quite implementable in my project. Is there any other solution?
– Toby Mao
Nov 8 at 13:58

Maybe apply position:fixed before tabChange to take the iFrame out of the Tabs , and when focusing on the tab return to the original position ?
– Gabriel Lopez
Nov 8 at 14:08

add a comment |

Thanks for your suggestion, but as I mentioned in the new update. This is not quite implementable in my project. Is there any other solution?
– Toby Mao
Nov 8 at 13:58

Maybe apply position:fixed before tabChange to take the iFrame out of the Tabs , and when focusing on the tab return to the original position ?
– Gabriel Lopez
Nov 8 at 14:08

Thanks for your suggestion, but as I mentioned in the new update. This is not quite implementable in my project. Is there any other solution?
– Toby Mao
Nov 8 at 13:58

Maybe apply position:fixed before tabChange to take the iFrame out of the Tabs , and when focusing on the tab return to the original position ?
– Gabriel Lopez
Nov 8 at 14:08

add a comment |

up vote
0
down vote

It should be backend issue, so it will be great to update question with iframe content. I've reproduce your situation audio still playing after hiding iframe

setTimeout(() => { document.getElementById('test').hidden = true; }, 10000 )

<iframe src="https://www.instagram.com/p/Bn5ar2uBd2C/embed/" width="640" height="880" id="test"></iframe>

edited Nov 8 at 14:30

answered Nov 8 at 14:10

Dim_K

549214

If I change the src into a normal video link, it works! But... I don't get that is there any difference between embedding a normal video or a web page inside an iframe.
– Toby Mao
Nov 8 at 14:25

@TobyMao i've updated code with embeded variant. Still works. Just start video manually before hiding in 10 secs. Btw may be manual start is a caus of work?
– Dim_K
Nov 8 at 14:31

add a comment |

up vote
0
down vote

It should be backend issue, so it will be great to update question with iframe content. I've reproduce your situation audio still playing after hiding iframe

setTimeout(() => { document.getElementById('test').hidden = true; }, 10000 )

<iframe src="https://www.instagram.com/p/Bn5ar2uBd2C/embed/" width="640" height="880" id="test"></iframe>

edited Nov 8 at 14:30

answered Nov 8 at 14:10

Dim_K

549214

If I change the src into a normal video link, it works! But... I don't get that is there any difference between embedding a normal video or a web page inside an iframe.
– Toby Mao
Nov 8 at 14:25

@TobyMao i've updated code with embeded variant. Still works. Just start video manually before hiding in 10 secs. Btw may be manual start is a caus of work?
– Dim_K
Nov 8 at 14:31

add a comment |

up vote
0
down vote

It should be backend issue, so it will be great to update question with iframe content. I've reproduce your situation audio still playing after hiding iframe

setTimeout(() => { document.getElementById('test').hidden = true; }, 10000 )

<iframe src="https://www.instagram.com/p/Bn5ar2uBd2C/embed/" width="640" height="880" id="test"></iframe>

edited Nov 8 at 14:30

answered Nov 8 at 14:10

Dim_K

549214

It should be backend issue, so it will be great to update question with iframe content. I've reproduce your situation audio still playing after hiding iframe

setTimeout(() => { document.getElementById('test').hidden = true; }, 10000 )

<iframe src="https://www.instagram.com/p/Bn5ar2uBd2C/embed/" width="640" height="880" id="test"></iframe>

setTimeout(() => { document.getElementById('test').hidden = true; }, 10000 )

<iframe src="https://www.instagram.com/p/Bn5ar2uBd2C/embed/" width="640" height="880" id="test"></iframe>

setTimeout(() => { document.getElementById('test').hidden = true; }, 10000 )

<iframe src="https://www.instagram.com/p/Bn5ar2uBd2C/embed/" width="640" height="880" id="test"></iframe>

edited Nov 8 at 14:30

answered Nov 8 at 14:10

Dim_K

549214

edited Nov 8 at 14:30

answered Nov 8 at 14:10

Dim_K

549214

answered Nov 8 at 14:10

Dim_K

549214

answered Nov 8 at 14:10

Dim_K

549214

If I change the src into a normal video link, it works! But... I don't get that is there any difference between embedding a normal video or a web page inside an iframe.
– Toby Mao
Nov 8 at 14:25

@TobyMao i've updated code with embeded variant. Still works. Just start video manually before hiding in 10 secs. Btw may be manual start is a caus of work?
– Dim_K
Nov 8 at 14:31

add a comment |

If I change the src into a normal video link, it works! But... I don't get that is there any difference between embedding a normal video or a web page inside an iframe.
– Toby Mao
Nov 8 at 14:25

@TobyMao i've updated code with embeded variant. Still works. Just start video manually before hiding in 10 secs. Btw may be manual start is a caus of work?
– Dim_K
Nov 8 at 14:31

If I change the src into a normal video link, it works! But... I don't get that is there any difference between embedding a normal video or a web page inside an iframe.
– Toby Mao
Nov 8 at 14:25

@TobyMao i've updated code with embeded variant. Still works. Just start video manually before hiding in 10 secs. Btw may be manual start is a caus of work?
– Dim_K
Nov 8 at 14:31

add a comment |

up vote
0
down vote

accepted

At last, I solve my own problem by an ugly approach.

The iframe works fine when style visibility='hidden' was set. So I just rewrite the el-tab-pane in the element-ui.

The initial version of el-tab-pane was:

<template>

  <div

    class="el-tab-pane"

    v-if="(!lazy || loaded) || active"

    v-show="active"

    role="tabpanel"

    :aria-hidden="!active"

    :id="`pane-${paneName}`"

    :aria-labelledby="`tab-${paneName}`"

  >

    <slot></slot>

  </div>

</template>

A did a little modification as follow (the v-visible was contained by npm vue-visible package) [TabPane]

<template>

  <div

    class="el-tab-pane"

    v-if="(!lazy || loaded) || active"

    v-show="active || fly"

    v-visible="active || !fly"

    role="tabpanel"

    :aria-hidden="!active"

    :id="`pane-${paneName}`"

    :aria-labelledby="`tab-${paneName}`"

  >

    <slot></slot>

  </div>

</template>

In my own code, I replaced the el-tab-pane to my DIY TabPane, adding a props named fly to indicate whether to use v-show or the v-visible to hide the components.

answered Nov 9 at 2:39

Toby Mao

156

add a comment |

up vote
0
down vote

accepted

At last, I solve my own problem by an ugly approach.

The iframe works fine when style visibility='hidden' was set. So I just rewrite the el-tab-pane in the element-ui.

The initial version of el-tab-pane was:

<template>

  <div

    class="el-tab-pane"

    v-if="(!lazy || loaded) || active"

    v-show="active"

    role="tabpanel"

    :aria-hidden="!active"

    :id="`pane-${paneName}`"

    :aria-labelledby="`tab-${paneName}`"

  >

    <slot></slot>

  </div>

</template>

A did a little modification as follow (the v-visible was contained by npm vue-visible package) [TabPane]

<template>

  <div

    class="el-tab-pane"

    v-if="(!lazy || loaded) || active"

    v-show="active || fly"

    v-visible="active || !fly"

    role="tabpanel"

    :aria-hidden="!active"

    :id="`pane-${paneName}`"

    :aria-labelledby="`tab-${paneName}`"

  >

    <slot></slot>

  </div>

</template>

In my own code, I replaced the el-tab-pane to my DIY TabPane, adding a props named fly to indicate whether to use v-show or the v-visible to hide the components.

answered Nov 9 at 2:39

Toby Mao

156

add a comment |

up vote
0
down vote

accepted

At last, I solve my own problem by an ugly approach.

The iframe works fine when style visibility='hidden' was set. So I just rewrite the el-tab-pane in the element-ui.

The initial version of el-tab-pane was:

<template>

  <div

    class="el-tab-pane"

    v-if="(!lazy || loaded) || active"

    v-show="active"

    role="tabpanel"

    :aria-hidden="!active"

    :id="`pane-${paneName}`"

    :aria-labelledby="`tab-${paneName}`"

  >

    <slot></slot>

  </div>

</template>

A did a little modification as follow (the v-visible was contained by npm vue-visible package) [TabPane]

<template>

  <div

    class="el-tab-pane"

    v-if="(!lazy || loaded) || active"

    v-show="active || fly"

    v-visible="active || !fly"

    role="tabpanel"

    :aria-hidden="!active"

    :id="`pane-${paneName}`"

    :aria-labelledby="`tab-${paneName}`"

  >

    <slot></slot>

  </div>

</template>

In my own code, I replaced the el-tab-pane to my DIY TabPane, adding a props named fly to indicate whether to use v-show or the v-visible to hide the components.

answered Nov 9 at 2:39

Toby Mao

156

At last, I solve my own problem by an ugly approach.

The iframe works fine when style visibility='hidden' was set. So I just rewrite the el-tab-pane in the element-ui.

The initial version of el-tab-pane was:

<template>

  <div

    class="el-tab-pane"

    v-if="(!lazy || loaded) || active"

    v-show="active"

    role="tabpanel"

    :aria-hidden="!active"

    :id="`pane-${paneName}`"

    :aria-labelledby="`tab-${paneName}`"

  >

    <slot></slot>

  </div>

</template>

A did a little modification as follow (the v-visible was contained by npm vue-visible package) [TabPane]

<template>

  <div

    class="el-tab-pane"

    v-if="(!lazy || loaded) || active"

    v-show="active || fly"

    v-visible="active || !fly"

    role="tabpanel"

    :aria-hidden="!active"

    :id="`pane-${paneName}`"

    :aria-labelledby="`tab-${paneName}`"

  >

    <slot></slot>

  </div>

</template>

In my own code, I replaced the el-tab-pane to my DIY TabPane, adding a props named fly to indicate whether to use v-show or the v-visible to hide the components.

<template>

  <div

    class="el-tab-pane"

    v-if="(!lazy || loaded) || active"

    v-show="active"

    role="tabpanel"

    :aria-hidden="!active"

    :id="`pane-${paneName}`"

    :aria-labelledby="`tab-${paneName}`"

  >

    <slot></slot>

  </div>

</template>

<template>

  <div

    class="el-tab-pane"

    v-if="(!lazy || loaded) || active"

    v-show="active"

    role="tabpanel"

    :aria-hidden="!active"

    :id="`pane-${paneName}`"

    :aria-labelledby="`tab-${paneName}`"

  >

    <slot></slot>

  </div>

</template>

<template>

  <div

    class="el-tab-pane"

    v-if="(!lazy || loaded) || active"

    v-show="active || fly"

    v-visible="active || !fly"

    role="tabpanel"

    :aria-hidden="!active"

    :id="`pane-${paneName}`"

    :aria-labelledby="`tab-${paneName}`"

  >

    <slot></slot>

  </div>

</template>

<template>

  <div

    class="el-tab-pane"

    v-if="(!lazy || loaded) || active"

    v-show="active || fly"

    v-visible="active || !fly"

    role="tabpanel"

    :aria-hidden="!active"

    :id="`pane-${paneName}`"

    :aria-labelledby="`tab-${paneName}`"

  >

    <slot></slot>

  </div>

</template>

answered Nov 9 at 2:39

Toby Mao

156

answered Nov 9 at 2:39

Toby Mao

156

answered Nov 9 at 2:39

Toby Mao

156

answered Nov 9 at 2:39

Toby Mao

156

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Xtykutl