0

I have a page inside an iframe, but I'd like to only show the main content - hiding the header, footer, & side margins. Here's the page with the iframe if you'd like to take a look:

http://www.carolinadreaming.com/?page_id=356

I tried this solution: Is it possible to display only a certain div within an iframe? but it didn't work, since both the inner page and the iframe itself are responsive/ scaleable.

Does anyone have any ideas? I'd really appreciate your help! Thanks!

Community
  • 1
  • 1
user3185883
  • 3
  • 1
  • 4

2 Answers2

0

If you have control of the IFRAME's contents, then add a parameter to your frame's url tag, such as

/myiframesite?hidedivs=true

Then, in the web page within the iframe, read the url parameter, and make the page behave as you direct.

If you don't have control, good luck.

How to do the above

You can easily find how to read url parameters by googling just that. A quick search found this page.

From reading that post, you can copy out this example code:

function getQueryParam( name ){
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");  
  var regexS = "[\\?&]"+name+"=([^&#]*)";  
  var regex = new RegExp( regexS );  
  var results = regex.exec( window.location.href ); 
   if( results == null )    return "";  
  else    return results[1];
}

Then you could use it like:

var doHideDivs = getQueryParam('hidedivs');

Then, if doHideDivs is true, hide your divs.

If you are stumped on hiding your divs, then you should do a basic Javascript tutorial before getting so ambitious on such an exact task as this.

Community
  • 1
  • 1
dthree
  • 19,847
  • 14
  • 77
  • 106
  • Yes, I have control over everything. But how would I do that exactly? Could you explain it please? – user3185883 Jan 11 '14 at 20:44
  • My friend, you have to do some work yourself. You will get a lot more support on Stack Overflow if you show evidence that you tried what you know and did put some effort into solving a problem before posting a question. Nevertheless, I posted an update above. – dthree Jan 11 '14 at 22:31
  • Thanks so much. I tried putting the first bit in my functions.js, the var in my sly.min.js (the template for the gallery post type aka the page inside the iframe) and the dohidedivs="true" inside the iframe's html tag. But I must still be doing it wrong bc it didn't work... Instead, I found a WAY simpler solution: I just added this to my css and it went away: body.postid-780 #header-container { display:none; } BUT... it looks like it also messed up my side margins on the rest of the page. Why would it do that? – user3185883 Jan 12 '14 at 02:07
  • Also, I promise I've been doing plenty of work myself. I'm just not very knowledgeable about this. I've been googling tutorials and searching forums and trying (and failing) since about 11AM this morning lol. – user3185883 Jan 12 '14 at 02:13
  • ok, the iframe isn't messing up the page margin actually, the frame's just appearing to be too small. but it's not the page (see http://www.carolinadreaming.com/?gallery=exposure), and when I use "inspector" on FF I can see that the frame has no padding or margin, and it still scales so there's no set width... I'm very confused. But still trying. – user3185883 Jan 12 '14 at 02:57
  • Got it! The iframe was set to 80%, I just missed it. Everything looks good now! Thanks anyways for your help!! :) – user3185883 Jan 12 '14 at 18:57
  • Good on figuring it out man! Persistence is one of your most valuable traits as a programmer. – dthree Jan 12 '14 at 21:05
0

I solved it by using the iframe plugin from:

http://wordpress.org/plugins/iframe/

Then I call the page to be displayed like this:

[iframe src="https://www.SiteToBeScrubbed.com/Directory/Page/#DivToBeDisplayed" width="100%" height="600px" scrolling="no"]

I hope this helps someone!

The darkside: I do have an issue when I do this. The whole page jumps up to make the iframe the top of the page when the iframe is loaded. Still working on figuring that one out.

user3220980
  • 29
  • 2