iframes and more

Today I'm gonna show you how to utilize iframes and how to link them together using melonking's script. The main goal of this tutorial is to use iframes of other HTML files you've made and put them into your index. The way this tutorial uses iframes is safe, but linking other sites using iframes can warrant security risks, although probably unlikely. Before this tutorial, you need to know basic CSS to customize your iframe and you will need pages to link your iframe to. The pages don't have to be complete yet, but you just need the file made.

You can see something like this on my homepage or on cinni's dream home.


  1. Pros/Cons
  2. HTML
  3. CSS
  4. JS
  5. JS Optional

starting now...

Step 1 - Pros/Cons

 Easy to use
 All browsers can use iframes
 Usually not good with mobile devices
 Untrusted sites have security risks
 There are some
deprecatedA deprecated element or attribute is one that has been outdated by newer constructs

Step 2 - HTML

Insert the following code into your index . html file. Keep the ID, Name, Class, Frameborder, and Scrolling attributes the same.

You can use the code below to make the iframe change pages. Feel free to add any pages or change anything you need.

Step 3 - CSS

In the CSS file linked to your index . html add the following code. Please change accordingly to your aesthetic and needs

To debug where your iFrame is on your page, you can add the following code. You can change the color if needed.

Step 4 - JS

In the head of your index . html add the following code.

Step 5 - JS Optional

In the head of your index . html and underneath the code you just added, look at this link to see what optional things to add. An example is below.