Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Imitating Iframe or Finding Dynamic Heigh Iframe Solution

Featured Replies

Hey guys, I'm working on a page on my website where I am trying to embed another website in it. I normally don't like using iframes as much but it seemed like the best possible solution.

 

Here is the link: Here

 

The problem is that the website I am embedding has different heights based on what you click. So I tried to implement(via jQuery and Javascript) a way to resize the iframe based on the the height of the inner frame. However, I kept receiving a permission denied error on calls to document.body. I did a little research and found that it's quite hard to do dynamic iframe height based with crossdomains. I found some fixes but they required that I have access to both pages to implement Javascript. Thing is that the website I am embedding is a website that I don't have access to so I can't put in the proposed Javascript fixes. My question is does anyone know of a way to fix this or of simply a way to mimic an iframe and embed another webpage into mine?

 

Any help would be very much appreciated.

Theoretically, ou could use a PHP script to preprocess the 'framed' site and strip out the unnecessary stuff (doctype, html, head and body tags) before using a php include to display it. That'd also let you avoid using frames/iframes.

  • Author

Hm, that sounds plausible but I never used PHP before. Any ideas on how to go about it?

look to my site(signature) and tell me if its the kind of iframe you are looking for

  • Author

Well I'd like to have it without scrolling, the problem was that I wanted it to resize the whole iframe based on the content so that I don't have multiple scrollbars.

look to my site(signature) and tell me if its the kind of iframe you are looking for

 

On a side not, your scrollbars don't work for me. I can move the scroll bar but nothing happens on the screen. Just thought i'd let your know :)

On a side not, your scrollbars don't work for me. I can move the scroll bar but nothing happens on the screen. Just thought i'd let your know :)

 

i can see that people still use that explorer browser(No offence) :p

Did some googling and came up with this

 

http://www.dynamicdrive.com/forums/showthread.php?t=882

 

The problem is solved by Veronica later in the topic. Only problem is that it scrolls to top of the screen.

 

Greetz R-J

 

i can see that people still use that explorer browser(No offence) :p

 

I'm using IE 7 :pp, Suposedly the most recent version of IE.

  • Author

I put in that script, but it seems to load it really small with a scrollbar even though the iframe has scrolling="no". Any ideas?

 

Edit: Just noticed I also get the Permission Denied error meaning it can't get the height of the iframes content. Sigh...

Hm, that sounds plausible but I never used PHP before. Any ideas on how to go about it?

 

I'm really not great with PHP, but something along the lines of:

 

<?php

$step1 = file_get_contents("http://theframedpagegoeshere.html", "r");

$step2 = eregi_replace ("<?xml .*<body>","",$step1);

$step3 = eregi_replace ("</body>","",$step2);

echo $step3;

?>

  • Author

Hm so your php solution works(kinda). Problem I run into is that it seems to affect the rest of the page layout. Also, when I click on a link within the generated page it goes to a new page. Anyway I could keep it on the same page?

Hm so your php solution works(kinda). Problem I run into is that it seems to affect the rest of the page layout. Also, when I click on a link within the generated page it goes to a new page. Anyway I could keep it on the same page?

 

Oh, there's bound to be flaws, I'm pretty rubbish at PHP at the moment :)

 

How does it affect the page layout? Is it 'cos it's not reading the relevant CSS for the linked page?

 

Re: the new pages.. you'd need to change the links in the linked page so that they go to another of your PHP pages (one that would have the clicked link embedded in it) rather than the original URL. You could use the same eregi_replace to replace URLs withink the document, but you'd need to have a way of generating the 'holder' pages as well.

  • Author

Yea, it seems the generated page is screwing up the parent page's css causing everything to move over and some images not to show.

 

Here is the regular template:

http://screencast.com/t/HmTpImxFwMJ

 

Here is the page with the embedded php code

http://screencast.com/t/keFd0gPL8

 

As for the new pages issue, I can't change any code on the embedded page as I don't have access to that sort of thing. So I should try to generate a "holder" page?

Yea, it seems the generated page is screwing up the parent page's css causing everything to move over and some images not to show.

 

Here is the regular template:

http://screencast.com/t/HmTpImxFwMJ

 

Here is the page with the embedded php code

http://screencast.com/t/keFd0gPL8

 

As for the new pages issue, I can't change any code on the embedded page as I don't have access to that sort of thing. So I should try to generate a "holder" page?

 

Ok, with the CSS, you need to pull a copy of the linked page's stylesheet along with the page itself. It's a bit out of my capabilities, but I'm pretty sure you can use PHP to search within the document for particular strings (<link rel="stylesheet"*/> etc) and then copy that so you can use it to call the document's own stylesheet.

 

Re: the new pages bit, you don't need to be changing the code on the original page, just your embedded copy. Use the replace function to change all the target="blank" etc to target="parent" and hopefully that'll sort it

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.