显示选项卡时,引导选项卡内的框架将消失

时间:2016-03-27 作者:Артур Пипченко

我目前正与奇怪的iframe行为作斗争:我有一个bootstrap选项卡,其中有三个youtube iframe。当我第一次转到此选项卡时,iframes会消失,但如果我单击另一个选项卡并返回到带有iframes的选项卡,它们会显示出来!我已尝试使用“Showed”强制iframe重新加载。英国标准。js中的tab事件,iframes出现,重新加载,但随后消失。下面是视频选项卡中的代码

        <div id="videoblog" class="tab-pane fade">
                    <?php 
            $news_query = new WP_Query(array(\'post_type\'=>\'video\', \'posts_per_page\'=>3)); 
            while ($news_query->have_posts()){
                $news_query->the_post();
                $video_link = get_post_meta( get_the_id(), \'youtube_link\', true );
                $video_link = str_replace("watch?v=", "embed/", $video_link);
                 ?>
                    <div class="news-item <?php if($post_num == 0 || $post_num == 2) { echo \'left\'; } else { echo \'right\'; } ?>">
                        <div class="videowrapper">
                            <iframe src="<?php echo $video_link.\'?rel=0&fs=1\'; ?>" width="650" height="420" allowfullscreen frameborder="0"></iframe>
                        </div>
                        <div class="news-item-text pt-sans">
                        <div class="news-text-wrapper">
                            <span class=\'news-item-date\'>
                                <?php echo get_the_date(\'d.m.Y\'); ?>

                            </span>
                            <span class="news-item-title">
                                <?php echo get_the_title(); ?>
                            </span>
                            <span class=\'news-item-excerpt\'>
                                <?php echo get_the_excerpt(); ?>
                            </span>
                            </div>
                        </div>
                    </div>
            <?php } ?>
    </div>
我还注意到,如果我用“v/”而不是“embed/”插入视频,视频会显示出来,但全屏按钮不起作用

1 个回复
SO网友:kaiser

你的问题不在你的控制范围之内。iframes是not 您的网站(至少在嵌入外部来源的内容时)。那里的内容由其他开发人员控制。然后,你会遇到一个问题,即使用JavaScript隐藏和显示内容确实会把事情搞砸——谷歌地图就是一个常见的例子。您所能做的最好的事情就是切换到普通链接并为该内容启用oEmbed,因为这在您的控制下非常微小,并且比使用iFrame不控制更容易处理。然后,您应该执行类似于AJAX请求(JS-wise)的操作,并在显示选项卡时重新加载内容/div/任何html元素。可以找到更多相关信息in this answer.