Check if iframe page has content using JavaScript or jQuery

Question

I'm dynamically creating a iframe tag which pulls in content from page, how do I check if the page i'm pulling from has content before displaying it? should I be checking for the content first before generating the iframe tag?

How do I check if the iframe page is '<html><body></body></html>', therefore don't show the 'adContainer'?

Heres some code I code that I've written so far...

function setAttributes(el, attrs) {
  for(var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}

// set ad iframe
function setAdiFrame(iWidth, iHeight, bookname) {
  var randNum = Math.floor(Math.random()*1000000000);
  var adFrame = document.createElement('IFRAME');
  setAttributes(adFrame, {
    "src": "http://www.foo.com/" + bookname + "/;cat=" + bookname + ";sz=" + iWidth + "x" + iHeight + ";ord=" + randNum,
    "height": iHeight,
    "width": iWidth,
    "border": "0",
    "scrolling": "no",
    "allowtransparency": "true"
  });
  $('.ad').append(adFrame);
}

// ad container
var adContainer = $('.ad-container');
// check if ad container exist
if(adContainer.length > 0) {
  // check if it's mobile
  if(categorizr.isMobile) {
    setAdiFrame(300, 400, 'bookname');
  // otherwise, show desktop ad
  } else {
    setAdiFrame(728, 660, 'bookname');
  }
  // show ad once iframe page is loaded
  adContainer.find('iframe').on('load', function() {
    adContainer.css('display', 'block');
  });
}

The outputted mark-up for adContainer is as such.

<div class="ad-container" style="display: block;">
    <div class="ad">
        <a id="close" href="button:close"></a>
            <iframe src="http://www.foo.com;bookname/;cat=bookname;sz=728x660;ord=849890967" height="660" width="728" border="0" scrolling="no" allowtransparency="true"></iframe>
    </div>
</div>

The outputted html within the src of the IFrame page could be '<html><head></head><body></body></html>'. If that is the case, I do not want to display adContainer.

otherwise this may help: http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe — Paul Nikonowicz, Aug 26 '13 at 05:23
http://stackoverflow.com/questions/4215952/how-to-check-if-iframe-is-empty-null-undefined — , Aug 26 '13 at 05:28
@rps there's a possibility that the page returning '', therefore I don't want to show the 'ad-container' div either. — calebo, Aug 26 '13 at 05:29

score 0 · Answer 1 · 2013-08-26T07:05:54.653

0

if(adFrame.contents().find("body").html()=="") {
    adContainer.css('display', 'none');
}

edited Aug 26 '13 at 07:05

answered Aug 26 '13 at 05:31

My iframe page would return '' instead of blank, how would I check that instead of blank? – calebo Aug 26 '13 at 06:12
the above condition not working? try `adContainer.contents()==''` then – Aug 26 '13 at 06:13
try alerting `adContainer.contents()` whatever it is showing, match with that! – Aug 26 '13 at 06:46
I've updated my question, perhaps that might help better understand the issue I have. – calebo Aug 26 '13 at 06:59
I had written `adContainer` instead of `adFrame`, change it to `adFrame.contents().find("body")` this will return a body object, you check that in console or by alerting it. once you have fetched that you can check if there is anything inside the body tag – Aug 26 '13 at 07:31
returns [], which is blank, if you see my outputted mark-up, i should be looking for `adContainer.contents().find("iframe").contents();`. however, I want to be able to match that if the body of the iframe page is equal to `` – calebo Aug 26 '13 at 07:48
what output you are getting for `adContainer.contents().find("iframe").contents().find("body").html();` ? – Aug 26 '13 at 08:44
The above script is working for me. But now I need to show if iframe has contents. I am loading contents to iframe after clicking on a submit button and would like to display another form if it has loaded successfully. – Happy Coder Nov 24 '13 at 03:49
@AlwinAugustin, then use `load()`, `$('#myFrame').load(function(){ $(this).contents().find('#formWrapper').html("
"); });` – Nov 25 '13 at 07:01

Check if iframe page has content using JavaScript or jQuery

1 Answers1