Блог

Главная - Вопросы по программированию - Измените размер фрейма веб-страницы с помощью пользовательского скрипта TamperMonkey

Измените размер фрейма веб-страницы с помощью пользовательского скрипта TamperMonkey

#css #iframe #tampermonkey

Вопрос:

На виртуальном уроке испанского языка моего сына его учебник помещен в ужасно маленькую рамку, внутри которой вам нужно прокручивать, вместо того чтобы использовать всю высоту окна браузера.

Я посмотрел на код и обнаружил, что если я изменю высоту стиля для d2l-iframe (с 4-й по последнюю строку) с фиксированного 760 пикселей на 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>amp;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>amp;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=303492amp;amp;type=ltiamp;amp;rCode=0e28c0388c4f4923851fc7eb-12amp;amp;contentTopicId=4043435amp;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>

Ответ №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";

Я надеюсь, что это поможет, но если бы это было не так, я бы предложил поискать манипуляции с DOM с помощью html
Но для вашей ситуации поиск по изменению ширины и высоты с помощью dom js
Понимание DOM, вероятно, очень поможет вам

Ответ №2:

Класс и идентификатор меняются при перезагрузке страницы. Итак, могу ли я сопоставить, используя подстановочный знак? Класс всегда начинается с «d2l-iframe», а идентификатор всегда начинается с «d2l_».

Кроме того, элемент, который я хочу изменить, кажется «стилем», там нет ширины=.

 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%";
Метки: