JQuery изменение содержимого iframe CSS не работает

Question

Я пытаюсь создать iframe, где показывать html-документы, и с помощью ряда кнопок изменить стиль содержимого iframe, изменив CSS-href на таблицу стилей.

Сначала я попытался избежать загрузки iframe в HTMLдокумент внутри части страницы, но таким образом я вынужден изменить общий CSS, создавая беспорядок с другим элементом HTML.затем я попытался изменить функцию jQuery, которую можно увидеть в Интернете.

Это функция

$(document).ready(function(){
    var change_style = $("iframe").contents();
        $("#option1").click(function(){
        change_style.find("#test").attr("href","type_1.css");
            });

        });

, это Iframe

<iframe class="embed col-6" id="first" src="document_1.html">

Это кнопка:

<label class="btn btn-secondary">

<input type="radio" name="options" id="option1" autocomplete="off" checked> 
1450
</label>

И это HTML-код содержимого iframe (только ссылка на CSS):

<link id="test" rel="stylesheet" type="text/css" href="type_2.css">

Скрипт не работает и со страницей ничего не происходит,стиль остается неизменным, как и должно быть.

Answer 1

Возможно, iframe загружен не полностью при попытке доступа к нему.Также я бы использовал contentWindow для получения содержимого iframe.

$(document).ready(function(){
    $("iframe").load(function(){
        $("#option1").click(()=>{
            $(this.contentWindow.document).find("#test").attr("href","type_1.css");
        });
    });

});