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.frames或document.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 iOS 自定义输入法-第三方输入法
  • ¥15 很想要一个很好的答案或提示
  • ¥15 扫描项目中发现AndroidOS.Agent、Android/SmsThief.LI!tr
  • ¥15 怀疑手机被监控，请问怎么解决和防止
  • ¥15 Qt下使用tcp获取数据的详细操作
  • ¥15 idea右下角设置编码是灰色的
  • ¥15 全志H618ROM新增分区
  • ¥15 在grasshopper里DrawViewportWires更改预览后，禁用电池仍然显示
  • ¥15 NAO机器人的录音程序保存问题
  • ¥15 C#读写EXCEL文件，不同编译