Добавление HTML в iFrame с использованием jQuery и поиск класса

Question

Я пытаюсь добавить текст в iframe в моем коде, но по какой-то причине я не могу заставить jquery найти определенный класс во фрейме.если я использую универсальный элемент, такой как 'body', он работает, но мне нужно иметь возможность добраться до класса '.shopify-buy__product__actual-price'.

Этот код работает:

jQuery(document).ready(function( $ ){
    var iframeDOM = $('iframe').contents();
    var node = iframeDOM.find('body').html('<p>Starting at</p>');
});

Но это не так:

jQuery(document).ready(function( $ ){
    var iframeDOM = $('iframe').contents();
    var node = iframeDOM.find('.shopify-buy__product__actual-price').html('<p>Starting at</p>');
});

Может кто-нибудь объяснить, как я могу достичь этого класса?

вот полный код iframe:

Answer 1

Вы можете попробовать это:

$(function() { 
  var iframe = $("iframe");
  iframe.on( "load", function() {
    var frame = document.getElementById("iframe");
    var newElement = frame.contentWindow.document.getElementsByClassName("index__sub-menu___3XMYU")
    var text = document.createTextNode("Starting price");
    newElement[0].appendChild(text)

Answer 2

Вам нужно разрешить загрузку iframe перед доступом к элементам

Попробуйте

jQuery(document).ready(function($) {
  $('iframe').on('load', function() {
    $(this).contents().find('.shopify-buy__product__actual-price').html('<p>Starting at</p>');
  });
});