jing_su_long 2019-05-16 11:10 采纳率: 0%
浏览 419

360浏览器切换Iframe的问题

一个视频监控的代码,大窗口里有4个iframe,可以通过放大iframe来实现切换,每个iframe里都有时间显示的功能,现在问题来了,时间显示在chrome浏览器正常显示,但是在360浏览器里就不太正常了,4个iframe一个显示有卡顿,另外3个iframe在切换的瞬间时间会跳动的特别快,试了好久,也调试过缓存的问题,但还是不行,麻烦各位大神了。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>地图应用</title>
    <link href="css/base.css" rel="stylesheet" />
    <link href="css/ol4.css" rel="stylesheet" />
    <link href="css/bootstrap4.0.css" rel="stylesheet" />
    <!--zTree插件-->
    <link href="css/zTree/zTreeStyle.css" rel="stylesheet" />
    <!--时间插件-->
    <link href="css/datePicker/datetimepicker.min.css" rel="stylesheet" />
    <!--弹窗插件-->
    <link href="css/layer/theme/default/layer.css" rel="stylesheet" />
    <link href="css/mapsite.css" rel="stylesheet" />
    <link href="css/colpick.css" rel="stylesheet" />
    <link href="css/map.css" rel="stylesheet" />  
    <script src="scripts/libs/jquery.min.js"></script>
    <script src="scripts/libs/ckplayer/ckplayer.js"></script>
    <script src="scripts/libs/bootstrap4.0.js"></script>   
    <script src="scripts/config.js"></script>
    <script src="scripts/myVideoPlayerHelper.js"></script>   
    <script src="scripts/libs/video/flowplayer-3.2.8.min.js"></script>

</head>
<body onload="PageLoad()" ondragstart="return false"> 
    <!--左下角实时监控视屏-->
    <div id="h1004" class="listContainer" style="display: block;">
        <h1>实时监控<div style="float:right;"><img src="./images/tools/full.png" class="fullImage" onclick="fullRealTimeMonitoringModal($(this))"/><span class="myclosebutton closeLevel" style="padding:0 8px;" onclick="showDefaultFourVideo()">×</span></div></h1>
        <span class="switchCarousel" style="display:none;"><img style="margin: 7px 0;" src="./images/tools/swiper.png" alt="" /></span>
        <div id="carousel" style="height: 100%;">
            <div class="cameraWrapper">
                <img class="selectImg" onclick="switchActive($(this))" src="images/tools/noSelect.png" alt="noSelect">
                <div id="camera1" class="camera"></div>
            </div>
            <div class="cameraWrapper">
                <img class="selectImg" onclick="switchActive($(this))"  src="images/tools/noSelect.png" alt="noSelect">
                <div id="camera2" class="camera"></div>
            </div>
            <div class="cameraWrapper">
                <img class="selectImg" onclick="switchActive($(this))" src="images/tools/noSelect.png" alt="noSelect">
                <div id="camera3" class="camera"></div>
            </div>
            <div class="cameraWrapper">
                <img class="selectImg" onclick="switchActive($(this))" src="images/tools/noSelect.png" alt="noSelect">
                <div id="camera4" class="camera"></div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div id="h1004Video" style="display: none;">
            <div id="camera5" class="camera"></div>
        </div>
    </div>


    <script type="text/javascript">
        function PageLoad() {
            param.videoUrl = "rtmp://58.211.54.69/hls/cctv";
            param.defaultVideos = ["58","105","57","110"];            

            //实例化功能工厂
            var helpers = [
                new MyVideoPlayerHelper()];             
            IPlayer.show(); 
            IPlayer.showDefaultFourVideo();
        }
    </script>

</body>
</html>

  • 写回答

1条回答 默认 最新

  • 雪梅零落 全栈领域优质创作者 2024-04-18 08:46
    关注

    在JavaScript中,浏览器切换iframe通常涉及使用window.framesdocument.getElementById('iframeId').contentWindow来访问iframe的window对象,然后通过这个window对象来操作iframe内部的内容。

    假设有一个HTML页面,它包含一个iframe,iframe中又有一些可以交互的元素。我们的目标是使用JavaScript从父页面切换到iframe,并操作其中的元素。

    首先是HTML结构:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Iframe Switching Example</title>
        <script src="script.js"></script>
    </head>
    <body>
        <iframe id="myIframe" src="iframe.html"></iframe>
        <button onclick="switchToIframeAndClick()">切换到iframe并点击按钮</button>
    </body>
    </html>
    

    iframe.html 文件的内容如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Iframe Content</title>
    </head>
    <body>
        <button id="iframeButton">iframe内的按钮</button>
    </body>
    </html>
    

    现在,在script.js文件中,我们将编写函数来切换到iframe并触发其中的按钮点击事件:

    function switchToIframeAndClick() {
        // 获取iframe元素
        var iframe = document.getElementById('myIframe');
        
        // 检查iframe是否加载完成
        if (iframe.contentWindow && iframe.contentWindow.document) {
            // 切换到iframe的window对象
            var iframeWindow = iframe.contentWindow;
            
            // 获取iframe中的按钮元素
            var iframeButton = iframeWindow.document.getElementById('iframeButton');
            
            // 检查按钮是否存在
            if (iframeButton) {
                // 触发按钮的点击事件
                iframeButton.click();
                console.log('iframe内的按钮已被点击');
            } else {
                console.log('无法在iframe中找到按钮');
            }
        } else {
            console.log('iframe尚未加载完成');
        }
    }
    

    在这个案例中,我们首先通过document.getElementById获取了iframe元素。然后,我们检查iframe的contentWindow属性是否存在,并且contentWindow.document是否可用,以确保iframe已经加载完成。接下来,我们通过iframe.contentWindow访问了iframe的window对象,并使用这个window对象的document属性来访问iframe内部的DOM。

    使用getElementById在iframe的DOM中找到了按钮元素,并触发了它的点击事件。

    评论

报告相同问题?

悬赏问题

  • ¥15 CST仿真别人的模型结果仿真结果S参数完全不对
  • ¥15 误删注册表文件致win10无法开启
  • ¥15 请问在阿里云服务器中怎么利用数据库制作网站
  • ¥60 ESP32怎么烧录自启动程序
  • ¥50 html2canvas超出滚动条不显示
  • ¥15 java业务性能问题求解(sql,业务设计相关)
  • ¥15 52810 尾椎c三个a 写蓝牙地址
  • ¥15 elmos524.33 eeprom的读写问题
  • ¥15 用ADS设计一款的射频功率放大器
  • ¥15 怎么求交点连线的理论解?