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

2019-05-27 19:23:45 阅读：653 来源： 互联网

标签：jquery javascript css css-transitions iframe

我有一个小项目在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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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