Почему в iframe конфликтуют свойства?

Question

У меня есть сайт во фрейме, я пытаюсь сделать в нем два действия: элементам с найденным атрибутом добавить еще один атрибут и по клику по ссылкам заменить адрес у фрейма(сделать переход по страницам в адресной строке). Но обновременно эти два действия не работают.

$(document).ready(function(e) {
    $(".settings__toggle").on("click", function(e) {
      if ($("#opt-iframe").length === 0) {
        $("body")
          .addClass("opt-outer-body")
          .css({ overflow: "hidden" });
        $(".settings").after('<iframe id="opt-iframe"></iframe>');
        var contFrame = $("#opt-iframe")[0];
        if (contFrame) {
          contFrame.addEventListener("load", function() {
            const iframe = $(this).contents();
            iframe.find("[data-fancybox]").setAttribute("data-fancybox-type", "iframe");

            iframe.find("a[href]").on("click", function() {
              let href = $(this).attr("href");
              contFrame.src = href;

              setLocation(contFrame.src);
            });

            contFrame.contentWindow.document
              .querySelector(".settings")
              .remove();
          });

          contFrame.src = location.href;
        }
      }
    });
  });
  function setLocation(curLoc) {
    try {
      history.pushState(null, null, curLoc);
      return;
    } catch (e) {}
    location.hash = "#" + curLoc;
  }

Выполняется та задача, которая выше по коду. В консоли кстати выскакивает такая ошибка

iframe.find(...).setAttribute is not a function

Хотя он отрабатывает

Подскажите, что я не так делаю?

БЛОГ НА HUSL

Почему в iframe конфликтуют свойства?

Ответы (0 шт):