Adding HTML to iFrame using jQuery and finding class

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:

charlietfl · Accepted Answer · 2018-12-06 17:33:04Z

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>');
  });
});

answered Dec 6, 2018 at 17:33

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

charlietfl Over a year ago

Is iframe page on same domain as main page? Also is it using any asynchronous javascript to populate content?

Ben Cavenagh Over a year ago

The iframe is created by Shopify buy button api. I'm not fully sure how it creates it. I added a js timeout and it works now after waiting a couple seconds so yes it must be async. Guess I'll just stick with this hack for now

charlietfl Over a year ago

You could set an interval to check for that element and clear the interval once it is found

user9988919 · Accepted Answer · 2018-12-07 14:12:03Z

0

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)

answered Dec 7, 2018 at 14:12

user9988919

Collectives™ on Stack Overflow

Adding HTML to iFrame using jQuery and finding class

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related