钉钉JSAPI扫码功能页面嵌在iframe里面实现不了的问题_钉钉微应用,嵌入iframe,如何处理-CSDN博客

本文链接：https://blog.csdn.net/2301_76429178/article/details/144684242

建议直接改成跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微应用</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        #iframe-container {
            flex: 1;
            border: none;
        }
        #nav {
            display: flex;
            justify-content: space-around;
            background-color: #f5f5f5;
            padding: 10px 0;
        }
        #nav button {
            flex: 1;
            padding: 10px;
            border: none;
            background-color: white;
            font-size: 16px;
            cursor: pointer;
        }
        #nav button.active {
            background-color: #007bff;
            color: white;
        }
    </style>
</head>
<body>
<iframe id="iframe-container" src="home.html"></iframe>
<div id="nav">
    <button onclick="navigate('home.html')">首页</button>
    <button onclick="navigate('page1.html')">页面1</button>
    <button onclick="navigate('page2.html')">页面2</button>
    <button onclick="navigateToScan()">扫码</button>
</div>

<script>
    // 切换 iframe 页面
    function navigate(page) {
        // 设置iframe容器的src属性为指定的页面，以实现页面切换
        document.getElementById('iframe-container').src = page;

// 获取导航栏中所有的按钮元素
        const buttons = document.querySelectorAll('#nav button');

// 移除所有按钮的激活状态，以准备高亮当前选中的按钮
        buttons.forEach(btn => btn.classList.remove('active'));

// 为当前点击的按钮添加激活状态，以指示当前页面
        event.target.classList.add('active');
    }

    // 跳转到扫码页面
    function navigateToScan() {
        window.location.href = 'dd.html'; // 直接跳转到扫码页面
    }
</script>
</body>
</html>

扫码页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫码页面</title>
    <script src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js"></script>
</head>
<body>
<h1>扫码页面</h1>
<button id="scanButton">点击扫码</button>
<p id="result">扫码结果将在这里显示</p>

<script>
    if (/DingTalk/i.test(navigator.userAgent)) {
        dd.ready(() => {
            document.getElementById('scanButton').addEventListener('click', function () {
                dd.biz.util.scan({
                    type: "qrCode", // 或 "barCode"
                    onSuccess: function (data) {
                        alert("扫码成功，结果是：" + data.text);
                        document.getElementById('result').innerText = "扫码结果：" + data.text;
                    },
                    onFail: function (err) {
                        alert("扫码失败：" + JSON.stringify(err));
                    }
                });
            });
        });

        dd.error((err) => {
            alert("钉钉初始化失败：" + JSON.stringify(err));
        });
    } else {
        alert("当前不在钉钉环境中，扫码功能不可用");
    }
</script>
</body>
</html>