I'm a plete beginner in the development side of things and would greatly appreciate any help.

I have the following code that refreshes an entire page when the browser is resized:

$(window).bind('resize',function(){
     window.location.href = window.location.href; 
});

However, I want the refresh to be targeted at particular iframes with unique id's instead of the whole page.

Again, thank you in advance for any help.

I'm a plete beginner in the development side of things and would greatly appreciate any help.

I have the following code that refreshes an entire page when the browser is resized:

$(window).bind('resize',function(){
     window.location.href = window.location.href; 
});

However, I want the refresh to be targeted at particular iframes with unique id's instead of the whole page.

Again, thank you in advance for any help.

• javascript
• html
• iframe
• refresh

2 Answers 2

Use:

$(window).resize(function(){
    document.getElementById('FrameID').contentDocument.location.reload(true);
});

And consider using classes instead of IDs if you have multiple iFrames.

I am having issues with the Facebook social widget and I was hoping this would fix it. Your code was helpful (a good start).

That said, it did not work.

I will post a solution if I find one. Facebook really needs to update their widget. It really is problematic with responsive sites (mobile devices). Considering they created React code, it really is not very well written.

jQuery seems a better solution since I did not have an id to target) but the problem is deeper within the iframe.

// refresh facebook iframe on page resize (did not work)
$(window).resize(function(){
  $('.fb iframe')[0].contentDocument.location.reload(true);
});

//--- other ways to reload iframes---

//reload 1 iframe
$('#iframe')[0].contentWindow.location.reload(true);

//reload all iFrames
$('iframe').each(function() {
  this.contentWindow.location.reload(true);
});
 
//Another way to reload all iFrames
$('iframe').attr('src', $('iframe').attr('src'));

Update... I found these two well-written pages on the subject. Hopefully, it works.

• How to make the Facebook Page Plugin fully responsive
• Making The Facebook Page Plugin Responsive

UPDATE

The code above is nice, but they did not have it ready to rock and roll. The showed examples for their site and I almost got it working, but there is still a bug in my code.

so...

This is totally cheating, but I was looking at the source code and opened the iframe location from Facebook and it actually worked (it seems allowed). So far it seems to work with other profiles too (so long as you grant permission first).

I just hardcoded the iframe vs using their JavaScript code. It also works 1000x times better/faster this way and it is already responsive. It is nuts I had spent so much time with trying to fix Facebook's code. Using a straight URL link in the iframe loads way faster (geezzz).

Here is an example of what I used for the final URL (I cleaned up the unneeded parameters.

https://www.facebook./v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.%2FYOURFACEBOOKUSERNAME&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500

Again, keep in mind for this to work, you need to create a social box at Facebook first, so that you can grant permission. I tried to do it with my personal username and since I have never created one before, it did not work. Again, this is theory, but that makes sense.My actual site is using another client and I also tested other clients. It seems to work fine.

No promises it will work on a live site. It is possible Facbook blocks users that do not use it via the script, but we will see. I am guessing Facebook may use scripts in the code to check for location source, so this way may fail over time (don't know yet). Also, it is possible I am missing a needed key that Facebook genarates from the script thatI failed to notice (or removed). I was careful when I cleaned it up, and I did not want to include more than needed. We will see.

Anyways, try your own tests via the source code please. I need to work on other more important stuff, and this works and seems to be a simple very effective solution. I will have more time later if it fails. The client wont know and again, it is faster and seem to work better.

<iframe id="fb-iframe" src="https://www.facebook./v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500" width="100%" height="100%" allowtransparency="1" scrolling="no" frameborder="0"></iframe>

ONE MORE UPDATE.

It seems to be working, but I still need to send a refresh to the URL in the paramaters for the width. Also, note the maxium width for the social widget is 500px (so if you have a need for one bigger, it wont go more unless you use some kind of transform in CSS).

Here is the final code.

Funny about all this, I am back full circle. I am using some of the code we talked about above and some new code I figured out and wrote.

:)

Also noteworthy, I noticed the StackOverflow console is giving me an error.

Please ignore it. The error has something to do with the iframe reference calling Facebook which StackOverflow does not like. As far as I can tell, there is no error.

If I am wrong, let me know.

// Fixes Facebook iFrame on page resize (Responsive)
$(window).resize(function() {
    $('#fb-iframe').attr('src', "https://www.facebook./v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=" + $('#fb-iframe').width())
});

<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<iframe id="fb-iframe" src="https://www.facebook./v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500" width="100%" height="100%" allowtransparency="1" scrolling="no" frameborder="0"></iframe>