首页 > 编程语言> > javascript – Chrome无法正常显示iframe和/或转换

javascript – Chrome无法正常显示iframe和/或转换

2019-05-27 19:23:45 作者：互联网

我有一个小项目在safari和firefox中工作正常,但不是在chrome中.这是我为网络开发的第一个项目之一,所以仍然非常新鲜.我制作了几个GIF,这将为我节省很多解释.

这在safari中正常工作：

但这是在chrome中发生的事情：

所以这不符合预期.我的第一个想法是它可能是iframe和chrome的问题,但是文件在本地服务器上运行,据我所知,它应该不是问题.文本没有被推下来,所以这让我感到困惑,因为它表明css没有被正确解释？正如我所说的,我还是新手,这是我第一次在不同的浏览器中测试项目,所以不确定这个问题对我的项目有多具体.任何帮助非常感谢. P

以下是重现问题所需的完整代码.请记住,除非您运行本地服务器,否则Chrome将无法正常播放iframe.如果你想这样做,这取决于你.我得到的布局问题与iframe播放无关.

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test for S.O.</title>
    <link rel="stylesheet" type="text/css" href="forStack.css">
</head>
<body> 
<div id="container">

<div id="backgroundLeft"><img id='backgroundLeftImage' src="image1.jpg" width="100%" height="100%"></div>

<div id="wrap">

<p>Lorem ipsum dolor sit amet, ut eos alterum perpetua reformidans, odio possim in qui, et nam ferri disputationi. Pro an eius legimus volutpat, ius facilisi gubergren ei, modus inimicus ut his. Pro ei eirmod quaerendum, cu quo epicuri lucilius euripidis. Nam facer simul ut, aeterno persecuti ea vix, ius at alienum officiis perfecto.   
Dicta senserit dissentiunt quo ea. Ne possim lobortis percipitur his. Viderer appetere ea quo, has ne causae probatus, eum ea dissentiunt philosophia. Menandri imperdiet dissentiet per ad. Ea cibo tollit ius, mel id mundi vituperata.<span id="linkID" class="link"> click me </span>.<span><iframe id="frame" class="rect" scrolling="no" marginwidth=0 marginheight=0></iframe>   
</span> Lorem ipsum dolor sit amet, ut eos alterum perpetua reformidans, odio possim in qui, et nam ferri disputationi. Pro an eius legimus volutpat, ius facilisi gubergren ei, modus inimicus ut his. Pro ei eirmod quaerendum, cu quo epicuri lucilius euripidis. Nam facer simul ut, aeterno persecuti ea vix, ius at alienum officiis perfecto.
Dicta senserit dissentiunt quo ea. Ne possim lobortis percipitur his. 
Viderer appetere ea quo, has ne causae probatus, eum ea dissentiunt philosophia. Menandri imperdiet dissentiet per ad. Ea cibo tollit ius, mel id mundi vituperata.
    </p>
   </div>
 <div id="backgroundRight"><img id='backgroundRightImage' src="image2.jpg" width="100%" height="100%"></div>

    <script type="text/javascript" src="jquery.js"></script>
    <script src="scriptStack.js"></script>
</body>
</html>

CSS

html, body {
    min-height: 100;
    margin: 0px;
}

p span iframe {
    position: relative;
    left: 50%;
    transform: translateX(-50%);

}

#backgroundLeft{
    position: fixed;
    float: left;
    width: 30%;
    min-height: 100%;
    overflow: hidden;
}

#backgroundLeftImage {
    position: absolute;
}

#backgroundRightImage{
    position: absolute;
}

#wrap{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    margin: 100px auto;
    width: 20%;
}

#backgroundRight{
    position: fixed;
    left: 70%;
    width: 30%;
    min-height: 100%;
    overflow: hidden;
}

p{
    line-height: 2em;
    vertical-align: top;
    position: relative;
}

.videos {width: 100%;}

.link {
    color: #d6820e;
    cursor: pointer;
}

.link:hover {
    color: #d6460e;
}

iframe {
    border:0 none;
}

.rect{
    float: left;
    height: 0px;
    width: 100%;    
    display: block;
    margin: 0px;
    padding: 0px;
    opacity: 0;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 11.4vw;
    width: 100%;
    opacity: 1;
    display: inline-block;
}

$(document).ready(function(){

        var player;
        var frame = $("#frame");

        frame.bind("load", function () {
            player = $(this).contents().find("#testVid");
            player.on('ended', function () {
                frame.removeClass("open");
            });
        });

        $("#linkID").click(function(){

                if (frame.hasClass("open")) {   

                    frame.removeClass("open");
                    frame.contents().find('#testVid').get(0).pause();

                } else {

                    frame.attr("src","iframe.html");
                    document.getElementById('frame').onload = function() {
                        frame.addClass("open");
                        frame.contents().find('#testVid').get(0).play();
                    }
                }   
        });   
});

Iframe.html的

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript" src="script2.js"></script>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body>


    <video id="testVid" width="100%">
        <source src="mickey.mp4" type="video/mp4">
    </video>



</body>
</html>

————————————————– – – – – – -编辑 – – – – – – – – – – – – – – – – – – – ————————–

我有,从“.rect”类中删除了“left”属性并添加了display：inline,这解决了chrome显示问题,但现在我的文本中出现了奇怪的空白,如下所示：

我已经确保页面上每个可能的元素,类或id的填充和边距为零！

解决方法:

我相信你遇到的一些问题是由于混合显示：块;并显示：inline-block;对于相同的元素.

从.rect中删除float属性,从.open中删除display属性会产生以下结果,这似乎是按预期工作而没有其他更改.

.rect{
    height: 0px;
    width: 100%;
    display: block;
    margin: 0px;
    padding: 0px;
    opacity: 0;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 11.4vw;
    width: 100%;
    opacity: 1;
}

标签：jquery,javascript,css,css-transitions,iframe
来源： https://codeday.me/bug/20190527/1165364.html