如何使用TamperMonkey用户脚本修改d2l-iframe框架的固定高度

你可以通过两种常见方案实现该修改，优先推荐CSS注入方案，逻辑简单且对动态加载的元素也能生效：

方案1：CSS强制覆盖（推荐） #

利用CSS的!important规则优先级高于元素内联style属性的特性，直接注入自定义样式覆盖原有高度设置，不需要监听元素加载时机。
完整脚本示例：

// ==UserScript==
// @name         D2L课程iframe高度适配
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  将D2L平台的课程iframe高度改为87vh适配屏幕
// @match        *://*/*
// 请把上面的@match替换成你实际的课程平台域名，比如你的平台是xxx.brightspace.com就改成*://*.brightspace.com/*，避免脚本在所有站点运行
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';
    // 注入自定义样式，同时把父容器d2l-popup-body的固定高度也取消，避免限制iframe显示
    GM_addStyle(`
        .d2l-iframe {
            height: 87vh !important;
        }
        .d2l-popup-body {
            height: auto !important;
            /* 如果auto不合适也可以自己设为calc(87vh + 60px)，60px是顶部标题栏的高度，根据实际显示效果调整 */
        }
    `);
})();

方案2：JS动态修改元素属性 #

如果因为站点特殊的样式规则导致CSS注入不生效，可以用MutationObserver监听DOM变化，找到目标iframe后直接修改其style属性，适配动态加载的内容：

// ==UserScript==
// @name         D2L课程iframe高度适配
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  将D2L平台的课程iframe高度改为87vh适配屏幕
// @match        *://*/*
// 同样请替换@match为你的实际站点域名
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // 监听DOM变化的回调函数
    const observer = new MutationObserver((mutations) => {
        const iframe = document.querySelector('iframe.d2l-iframe');
        const popupBody = document.querySelector('.d2l-popup-body');
        if (iframe) {
            iframe.style.height = '87vh';
            // 同时修改父容器高度
            if (popupBody) popupBody.style.height = 'auto';
            // 找到元素后可以停止监听，节省性能
            // observer.disconnect();
            // 如果站点会多次弹出不同的课程窗口，就不要加上面的停止监听代码
        }
    });
    // 监听整个document的子元素变化
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

调试注意事项 #

• 修改完脚本后记得保存，刷新目标页面测试效果
• 如果高度显示有偏差，可以调整vh的数值，或者给iframe加个box-sizing: border-box避免内边距挤压高度

内容的提问来源于stack exchange，提问作者Jesse Dunn