使用jQuery将HTML添加到iFrame并查找类

Question

I am trying to add some text into an iframe in my code but for some reason I can't get the jquery to find a specific class in the frame. if I use a generic element like 'body' it works but I need to be able to reach the class '.shopify-buy__product__actual-price'.

This code works:

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

But this does not:

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

Can someone explain how I can reach that class?

here is the full iframe code:

Answer 1

You need to let the iframe load before accessing elements

Try

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

Answer 2

You could try this:

$(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)