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.

iFrame tag not displaying properly

Featured Replies

I am trying to use the iFrame tag to hide my folder and file-names in my URL.

 

I've found the correct syntax from online tutorials.

 

However, when I execute it, for some reason, the window which is displayed is severely "restricted"

 

The Height and Width are restricted to only about a fifth of the entire screen.

 

Here is the code for my INDEX.HTML file :

<!DOCTYPE HTML>
<html>
  <head>
    <title>My Title</title>
  </head>
  <body>
    <iframe src="mytest.html" height="100%" width="100%" name="Your Title" /> 
    </iframe>
  </body>
</html>
Index.html is, of course, the default webpage for my website. So, when it's executed, the browser goes to : MYTEST.HTML
I thought that setting the HEIGHT and WIDTH to 100% was supposed to take care of this issue.
But, it didn't.
So, I decided to add some CSS styling, as follows :
<!DOCTYPE HTML>
<html>
  <head>
    <title>Your Title</title>


<style type="text/css">
<!-- Full Screen Page Fix  -->
body { margin: 0; }
</style>




  </head>
  <body>
    <iframe src="mytest.html" height="100%" width="100%" name="Your Title" /> 
    </iframe>
  </body>
</html>

 

I also added the attributes :

frameborder="0" scrolling="no"

And, then, I changed to :

frameborder="0" scrolling="yes"

But, this still did not resolve the issue.

 

Is the problem with my browser itself? Although, I doubt it.........seeing as I've tested this with Chrome, Mozilla, and IE

Edited by newuserphp

I don't really know TBH.. just lurking around for my own question to be answered lol.. should there be a tag before and after the iframe?

 

I dunno really

You should not have a closing "/" in your opening iframe tag

Insted of

 <iframe src="mytest.html" height="100%" width="100%" name="Your Title" /> 
    </iframe>

try:

 <iframe src="mytest.html" height="100%" width="100%" name="Your Title" > <!--No closing slash here-->
    </iframe>

NOTE: In HTML5 width and height attributes can't be in %. I'd remove the attributes and style the iframe with CSS instead.

<iframe src="mytest.html" name="Your Title" >
</iframe>
body{
  height:100%;
}
iframe {
  width:100%;
  height:100%;
}

BTW: Iframes is probably not a good idea to avoid folders and filenames in the url. Rewrite rules in your .htaccess might be a better idea the reason is that search engines will have difficulties indexing your content corectly if you bring the content in with iframes.

Edited by Nillervision

  • Author

You should not have a closing "/" in your opening iframe tag

Insted of

 <iframe src="mytest.html" height="100%" width="100%" name="Your Title" /> 
    </iframe

try:

 <iframe src="mytest.html" height="100%" width="100%" name="Your Title" > <!--No closing slash here-->
    </iframe

Also I think you should remove the width and height attributes and style it with CSS instead.

BTW: Iframes is probably not a good idea to avoid folders and filenames in the url. Rewrite rules in your .htaccess might be a better idea the reason is that search engines will have difficulties indexing your content corectly if you bring then content in with iframes.

 

 

Thanks for the response, Nillerversion.

 

Regarding the closing tag..........that was just a typo on my part. It was not part of my code.

 

(My original code is exactly as you wrote it).

 

As regards the bad effects of iFrame..........yes, I'm aware of them. Aside from the one you mentioned, regarding SEO, iFrames also :

 

(a) prevent users from Bookmarking specific pages on one's website;

 

( b ) cause difficulties with Debugging,

 

 

Of course, I would much rather have used the HTACCESS file. But, the "Rewrite" command in htaccess does not hide folders or filenames. It simply re-directs from one page to another. Meaning : the "target" page has to exist anyway.

Edited by newuserphp

  • Author

Still, this does not solve my issue

 

Removing the Height and Width parameters only made it worse : the window shrank even further, to the size of a cell phone :D

 

And, styling the width and height in CSS did not change anything :

 

 

<!doctype html>
<html>
<head>
<title>MY IFRAME TEST</title>
<style type="text/css">
body { margin: 0; }
iframe { width:100%; height:100%; }
</style>
</head>
<body>
<iframe src="mytest.html">
</iframe>
</body>
</html>

Edited by newuserphp

 

...

Of course, I would much rather have used the HTACCESS file. But, the "Rewrite" command in htaccess does not hide folders or filenames. It simply re-directs from one page to another. Meaning : the "target" page has to exist anyway. ...

See this

http://mosmostech.com/2012/06/htaccess-rewrite-to-remove-a-subfolder/

and this:

http://stackoverflow.com/questions/2618326/mod-rewrite-hide-folder

  • Author

 

 

Quick question : if I had a file-path that looked like this :

 

www.example.com/CODE/myfile.php

 

www.example.com/CODE/HTML/myfile.html

 

 

Basically, I want to hide everything that comes AFTER "Code".

 

Like so : www.example.com/CODE/.....................

 

 

How can I add it to my HTACCESS file ?

 

 

My file already looks like this :

Options -Indexes
Options -MultiViews
Options +FollowSymlinks


<IfModule mod_rewrite.c>


RewriteEngine on
RewriteBase /


RewriteCond %{REQUEST_FILENAME} !-d 
RewriteCond %{REQUEST_FILENAME}\.php -f 
RewriteRule ^(.*)$ $1.php


RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]


</IfModule>


From the links you gave me, I'm guessing I need to add something like this :

 

RewriteEngine On

 

RewriteRule ^/pages/(.+)\.php $1\.php [NC, L]

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.