itcat_admin
/
aws_donenow


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就业服务</title>
    <style>
        html, body, div {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #loadingIndicator {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            z-index: 100;
        }
        .spinner {
            width: 50px;
            height: 50px;
            border: 3px solid rgba(0,0,0,0.1);
            border-radius: 50%;
            border-top-color: #007BFF;
            animation: spin 1s ease-in-out infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
<div id="loadingIndicator">
    <div class="spinner"></div>
</div>
<div>
    <iframe id="scmFrameMain" src="" style="width: 100%;height: 100%;overflow: hidden;border: 0; display: none;"></iframe>
</div>

<script type="text/javascript">
    // 配置参数
    const CONFIG = {
        topElementSelector: "#app > div > div.aws-portal.top-nav > section > section > header.el-header.public-header-border > div > div",
        navSelector: "#app > div > div.aws-portal.top-nav > section > section > header.el-header.top-nav-border > div > div > div > div.menu-box > ul",
        menuItems: [
            { text: "学校", id: "school" },
            { text: "单位", id: "company" },
            { text: "学生", id: "student" }
        ],
        timeout: 15000, // 全局超时时间（毫秒）
        checkInterval: 200 // 检查间隔（毫秒）
    };

    var uid = '<#uid>';
    var sid = '<#sid>';
    var url = '<#url>';

    window.onload = function() {
        const scmFrameMain = document.getElementById('scmFrameMain');
        scmFrameMain.src = url;

        // 等待iframe加载完成
        waitForIframeLoad(scmFrameMain)
            .then(modifyIframeContent)
            .then(showIframe)
            .catch(error => {
                console.error('初始化失败:', error);
                showIframe(); // 出错时也显示iframe
            });
    };

    // 显示iframe并隐藏加载指示器
    function showIframe() {
        const loadingIndicator = document.getElementById('loadingIndicator');
        const scmFrameMain = document.getElementById('scmFrameMain');

        // 使用淡入效果显示iframe
        scmFrameMain.style.display = 'block';
        scmFrameMain.style.opacity = '0';

        // 淡出加载指示器
        loadingIndicator.style.transition = 'opacity 0.5s';
        loadingIndicator.style.opacity = '0';

        setTimeout(() => {
            loadingIndicator.style.display = 'none';
            scmFrameMain.style.opacity = '1';
            scmFrameMain.style.transition = 'opacity 0.5s';
        }, 500);
    }

    // 等待iframe加载完成
    function waitForIframeLoad(iframe) {
        return new Promise((resolve, reject) => {
            if (!iframe) {
                reject(new Error('未找到iframe元素'));
                return;
            }

            // 设置超时
            const timeoutId = setTimeout(() => {
                reject(new Error('iframe加载超时'));
            }, CONFIG.timeout);

            // 监听iframe加载完成
            iframe.onload = () => {
                clearTimeout(timeoutId);

                const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                if (!iframeDoc) {
                    reject(new Error('无法访问iframe文档'));
                    return;
                }

                // 等待iframe文档完全加载
                if (iframeDoc.readyState === 'complete') {
                    resolve(iframeDoc);
                } else {
                    iframeDoc.onreadystatechange = () => {
                        if (iframeDoc.readyState === 'complete') {
                            resolve(iframeDoc);
                        }
                    };
                }
            };
        });
    }

    // 修改iframe内容
    async function modifyIframeContent(iframeDoc) {
        try {
            // 并行执行移除和修改操作
            await Promise.all([
                removeElement(iframeDoc, CONFIG.topElementSelector),
                modifyNavigationMenu(iframeDoc)
            ]);

            console.log('所有修改已完成');
        } catch (error) {
            console.error('修改iframe内容时出错:', error);
        }
    }

    // 移除指定元素（无感知版本）
    function removeElement(doc, selector) {
        return new Promise((resolve, reject) => {
            if (!doc || !selector) {
                reject(new Error('无效的参数'));
                return;
            }

            // 立即检查元素是否存在
            const element = doc.querySelector(selector);
            if (element) {
                // 先隐藏元素，避免视觉闪烁
                element.style.visibility = 'hidden';

                // 使用requestAnimationFrame确保DOM渲染完成后再移除
                requestAnimationFrame(() => {
                    element.remove();
                    console.log('元素已成功移除:', selector);
                    resolve();
                });
                return;
            }

            // 设置超时
            const timeoutId = setTimeout(() => {
                observer.disconnect();
                reject(new Error(`查找元素超时: ${selector}`));
            }, CONFIG.timeout);

            // 使用MutationObserver监听DOM变化
            const observer = new MutationObserver((mutationsList) => {
                const foundElement = doc.querySelector(selector);
                if (foundElement) {
                    clearTimeout(timeoutId);
                    observer.disconnect();

                    // 先隐藏元素，避免视觉闪烁
                    foundElement.style.visibility = 'hidden';

                    // 使用requestAnimationFrame确保DOM渲染完成后再移除
                    requestAnimationFrame(() => {
                        foundElement.remove();
                        console.log('元素已成功移除:', selector);
                        resolve();
                    });
                }
            });

            // 开始观察
            observer.observe(doc.body, {
                childList: true,
                subtree: true
            });
        });
    }

    // 修改导航菜单（无感知版本）
    function modifyNavigationMenu(doc) {
        return new Promise((resolve, reject) => {
            if (!doc) {
                reject(new Error('无效的参数'));
                return;
            }

            // 立即检查导航栏是否存在
            const navUl = doc.querySelector(CONFIG.navSelector);
            if (navUl) {
                modifyNav(navUl, doc);
                resolve();
                return;
            }

            // 设置超时
            const timeoutId = setTimeout(() => {
                observer.disconnect();
                reject(new Error('查找导航栏超时'));
            }, CONFIG.timeout);

            // 使用MutationObserver监听DOM变化
            const observer = new MutationObserver((mutationsList) => {
                const foundNav = doc.querySelector(CONFIG.navSelector);
                if (foundNav) {
                    clearTimeout(timeoutId);
                    observer.disconnect();
                    modifyNav(foundNav, doc);
                    resolve();
                }
            });

            // 开始观察
            observer.observe(doc.body, {
                childList: true,
                subtree: true
            });
        });
    }

    // 实际修改导航栏的函数
    function modifyNav(navUl, doc) {
        try {
            // 先隐藏导航栏，避免视觉闪烁
            navUl.style.visibility = 'hidden';

            // 使用requestAnimationFrame确保DOM渲染完成后再修改
            requestAnimationFrame(() => {
                // 保留第一个li，删除其他所有li
                const navItems = navUl.querySelectorAll("li");
                for (let i = 1; i < navItems.length; i++) {
                    navItems[i].remove();
                }

                // 添加新菜单项
                CONFIG.menuItems.forEach(item => {
                    addMenuItem(navUl, doc, item.text, item.id);
                });

                // 恢复可见性
                requestAnimationFrame(() => {
                    navUl.style.visibility = 'visible';
                    console.log('导航栏修改完成');
                });
            });
        } catch (e) {
            console.error('修改导航栏时出错:', e);
        }
    }

    // 添加菜单项
    function addMenuItem(parent, doc, text, id) {
        if (!parent || !doc || !text || !id) return;

        // 使用iframe的document创建元素
        const newLi = doc.createElement("li");
        newLi.className = "el-sub-menu";
        newLi.setAttribute("role", "menuitem");
        newLi.setAttribute("id", `custom-${id}`);

        const newA = doc.createElement("a");
        newA.href = `javascript:void(0);`;
        newA.className = "el-menu-item";
        newA.setAttribute("role", "menuitem");
        newA.setAttribute("aria-disabled", "false");
        newA.setAttribute("tabindex", "-1");
        newA.setAttribute("aria-selected", "false");
        newA.textContent = text;

        // 添加点击事件
        newA.addEventListener('click', () => {
            console.log(`${text} 菜单项被点击`);
            // 这里可以添加菜单项点击后的逻辑
            onMenuItemClick(id);
        });

        newLi.appendChild(newA);
        parent.appendChild(newLi);
    }

    // 菜单项点击处理
    function onMenuItemClick(id) {
        // 根据不同的菜单项ID执行不同的操作
        console.log(`执行 ${id} 相关操作`);

        // 示例：根据ID执行不同操作
        switch(id) {
            case 'school':
                // 执行学校相关操作
                break;
            case 'company':
                // 执行单位相关操作
                break;
            case 'student':
                // 执行学生相关操作
                break;
        }
    }
</script>
</html>