使用jQuery將HTML添加到iFrame並查找類

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

您需要先讓iframe加載，然后才能訪問元素

嘗試

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

Answer 2

您可以嘗試以下方法：

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