CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
ToddT
ToddT

Reputation: 3258

Interact with jQuery dynamically loaded iFrame

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.

Upvotes: 0

Views: 548

Answers (2)

RobiNERD
RobiNERD

Reputation: 5

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

Upvotes: 0

Roljhon
Roljhon

Reputation: 1339

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.

Upvotes: 1

Related Questions