使用 TamperMonkey UserScript 修改网页框架大小答案

【问题标题】：Modify web page frame size with TamperMonkey UserScript使用 TamperMonkey UserScript 修改网页框架大小
【发布时间】：2021-11-02 05:34:20
【问题描述】：

我儿子的虚拟西班牙语课将他的课本放在一个非常小的框架中，您必须在其中滚动而不是使用浏览器窗口的整个高度。

我查看了代码，发现如果我将 d2l-iframe（第 4 行到最后一行）的样式高度从固定的 760px 更改为 87vh，它在他的显示器上看起来很完美。这是一个很小的更正，但我不知道如何让 TamperMonkey 更改它。我用谷歌搜索并尝试了几种方法都无济于事。

我真的只是在寻找具有 TamperMonkey/UserScripts 经验的人来为我指明正确的方向，但我想自己去那里。

<div class="d2l-popup d2l-popup-nopadding">
        <div class="d2l-popup-title">
            <div class="d2l_1_0_821 d2l_1_1_366 d2l-hidden" id="d2l-popup-nav">
                <div class="d2l-iterator">
                    <a class="d2l-iterator-button d2l-iterator-button-prev d2l-iterator-button-notext" role="button" href="/d2l/le/content/303492/navigateContent/2779/Previous?pId=4043417" title="Previous "><d2l-icon icon="tier1:chevron-left" dir="ltr"></d2l-icon><span class="d2l-offscreen">Previous </span>&nbsp;</a><a class="d2l-iterator-button d2l-iterator-button-next d2l-iterator-button-notext" role="button" href="/d2l/le/content/303492/navigateContent/2779/Next?pId=4043417" title="Next"><span class="d2l-offscreen">Next</span>&nbsp;<d2l-icon icon="tier1:chevron-right" dir="ltr"></d2l-icon></a></div>
            </div>
            <h2 class="d2l-heading vui-heading-1">01.00 Un viaje se mide mejor en amigos que en millas</h2>
        </div>
        <div class="d2l-popup-body" style="height: 709px;">
            <div class="d2l-messagearea d2l_1_2_876" id="d2l_messagearea" role="alert" tabindex="0"></div><div>
                <div class="d2l-iframe-loading-container d2l_1_4_428 d2l_1_5_609" style="display: none;">
                </div>
                <iframe class="d2l-iframe d2l_1_4_428 d2l_1_5_609" id="d2l_1_3_744" name="d2l_1_3_744" src="/d2l/common/dialogs/quickLink/quickLink.d2l?ou=303492&amp;type=lti&amp;rCode=0e28c0388c4f4923851fc7eb-12&amp;contentTopicId=4043435&amp;d2l_body_type=3" title="01.00 Un viaje se mide mejor en amigos que en millas" frameborder="0" scrolling="auto" allowfullscreen="" allow="microphone *; camera *; autoplay *" onload="this.m_loaded=true;" data-default-height="580" style="height: 87vh;width: 100%;"></iframe>
            </div>
        </div>
    </div>

【问题讨论】：

标签： css iframe tampermonkey

【解决方案1】：

只需制作一个更改其 html 的用户脚本。

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        www.whateverpage.com
// @icon         https://www.google.com/s2/favicons?domain=stackoverflow.com
// @grant        none
// ==/UserScript==

//below code selects the html class that stores the height element and //changes the width same thing can be done with height.
//if its an id then do document.getElementByID("idhere");
//if class then do document.querySelector("classhere").height = "760";
document.querySelector(".d21-popup-body").width = "760";

我希望这会有所帮助，但如果没有，我建议使用 html 查找 DOM 操作但是对于您的情况，使用 dom js 搜索更改宽度和高度了解 DOM 可能会对您有很大帮助

【讨论】：

【解决方案2】：

当页面重新加载时，class 和 id 会发生变化。那么我可以使用通配符匹配吗？类始终以“d2l-iframe”开头，id 始终以“d2l_”开头。

另外，我想改变的元素似乎是“样式”，里面没有width=。

class="d2l-iframe d2l_1_4_428 d2l_1_5_609" 
id="d2l_1_3_744" name="d2l_1_3_744"  
style="height: 650px; width: 100%;"

Tried this but still not hitting:
// @match        *://wvlearns.k12.wv.us*
document.getElementByID("d21_*").style = "height: 89vh; width:100%";
document.querySelector("d2l-iframe*").style = "height: 89vh; width:100%";

【讨论】：