CODEWITHSUNDEEP
javascriptjqueryhtmliframe
abzalassembekov
abzalassembekov

Reputation: 83

Hide iframe if src is http:// without link

I need to hide the iframe if the 

src is "http://".

What I tried to do:

<script type="text/javascript"> 
    if ( $('iframe[src][src="http://"]') )
        document.getElementById('iframe').style.display='none';
    else
        document.getElementById('iframe').style.display='block';
</script>

and html

<iframe id="iframe" src="url" ></iframe>

Upvotes: 2

Views: 4954

Answers (4)

garryp
garryp

Reputation: 5776

You could attach an onload handler to your iframe:

var iframe = document.getElementById('iframe');
iframe.onload = function() {
    if(iframe.src == 'http://') {
        iframe.style.display = 'none'; 
    } else {
        iframe.style.display = '';//default
    }
}

Upvotes: 1

Drakes
Drakes

Reputation: 23670

If you want to hide iframes with only src="http://", you can do this with jQuery and some regex.

Note: In Chrome, the src of "http://" is reported as "http:". In Safari and Chrome on iOS it is reported as "http:/". To account for this difference a simple regex can be used.

$('iframe').each(function() {
  var src = this.src.toLowerCase();
  if (/^http:[\/]{0,2}$/i.test(src)) {
    $(this).hide();
  } else {
    $(this).show();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
1. http://<br><iframe id="iframe" src="http://"></iframe><br>
2. http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png<br><iframe id="iframe" src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png"></iframe><br>

If you additionally want to hide iframes with src="" or no src set, or src="https://", you can use the code below. The conditional src === self.location.href tests for src="". The regex /^https?:[\/]{0,2}\w/i tests for "http(s)://" plus one word character. If not found, the iframe is hidden. Non-http(s) src'd iframes are hidden too.

$('iframe').each(function() {
  var src = this.src.toLowerCase();
  if (src === self.location.href || !/^https?:[\/]{0,2}\w/i.test(src)) {
    $(this).hide();
  } else {
    $(this).show();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
1. http://<br><iframe id="iframe" src="http://"></iframe><br>
2. https://<br><iframe id="iframe" src="https://"></iframe><br>
3. http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png<br><iframe id="iframe" src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png"></iframe><br>
4. ""<br><iframe id="iframe" src=""></iframe><br>
5. (blank)<br><iframe id="iframe"></iframe><br>
6. "a.htm"<br><iframe id="iframe" src="a.htm"></iframe><br>
7. src<br><iframe id="iframe" src></iframe><br>

Upvotes: 1

JediBurrell
JediBurrell

Reputation: 1109

Try this:

<script>
    function checkFrame(){
        if($('iframe[src][src="http://"]'))
            document.getElementById('iframe').style.display='none';
        else
            document.getElementById('iframe').style.display='block';
    }
</script>

and call the function whenever you need to check it. Perhaps the onLoad parameter on the body tag?

But I must ask, why "else" display it, it by default would be displayed.

Also, what if the value is null?

Well, hope that helps!

Upvotes: 1

TheGr8_Nik
TheGr8_Nik

Reputation: 3200

You have to change your jQuery selector to iframe[src="http://"] or a better solution is to use CSS to hide your iframe.

When you are working with style related things you should always use CSS instead of javascript.

iframe[src="http://"] {
  display: none;  
}
<iframe src="http://"></iframe>
<iframe src=""></iframe>

Upvotes: 2

Related Questions