Shopify Question posted in
The Shopify help center can be found here.

Interact with jQuery dynamically loaded iFrame – Shopify

By clicking on the X. I want to hide the div that houses my iFrame. I inserted the iFrame with jQuery. I created a jsFiddle with my example. Right now if I can just get “clicked” into the console when clicking on the X I’ll be happy.

Here is my jQuery that inserts and tries to hid the div that contains my iFrame.

$(document).ready(function(){  
  if (document.location.pathname === '/account'){
  console.log("loaded up");
  $('body').append($.parseHTML(frame));
}

$('#fresh-credit-button').on('click', function(){
  console.log("clicked");
});

});

I don’t have cross domain issues because I am using an appProxy thru Shopify.

Tags:

2

Answers


  1. 0

    You can do it like this if you already fixed the cross-domain issue.

    Get the reference to that iframe:

    var iframe = document.querySelector('iframe[src="https://test-4658.myshopify.com/apps/proxy/credit"]')

    Then from there do it like this below: 

    var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

    Then attach the onclick event

    var closeBtn = innerDoc.getElementById('fresh-credit-button');

closeBtn.addEventListener('click',function(){
    //close div here
    //same idea when accessing the div element from the iframe
});

    This is only written in native JS, you can do it via jQuery if you want. I hope it helps you find a way in fixing from your end as I couldn’t create a snippet.

    Login or Signup to reply.
  2. 0

    Hmm… You could try streaming the website from jquery like this:
    https://jsfiddle.net/uxc930xr/15/

    $('#message').load('https://test-4658.myshopify.com/apps/proxy/credit');

    Unfortunately this can’t run on jsfiddle due to it blocking jquery html from other sources

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search