Link to iFrame
|
Sometimes, you may want to change some contents on a page without reloading the whole page. There are many ways to do it using script, but here, I will describe the easiest way to do using iFrame. With the help of this feature, you can compose dynamically changing contents in a specific place. For this topic, you are required to acknowledge iFrame as well as HTML snippet. This feature may be very useful for sort of FAQ pages which need to show answers in a static frame for response of many links.
|
|
Instruction
This tips must be used if you want to make multiple links to different html pages which will appear on the same place. In other words, you can show other different web pages with multiple links. If you are still confused about this tip, please, test it on Live Demo box below. You can click three different words on the bottom of Demo box. I hope you would understand why I add this tip.
Once you click each link below, different pages will be loaded to the upper iframe area.
-
This tip supposes your page has iFrame already. Otherwise, now insert a HTML snippet onto your page, then you can insert your iFrame code. (This is just an example. Replace your own code.)
-
As you can see, the most important thing is that you have to assign iFrame name. The tag is
name="your-iFrame-name". The name should be unique if you want to insert multiple iFrames on a page.
-
iFrame setting is completed. The next thing is that we will make links to the iFrame that you want to show.
-
Drag HTML snippet widget onto your page like below or you can insert this widget from the top menu, "Insert > Widget > HTML Snippet".
-
After you have done it, you can see HTML snippet box which allows you to insert HTML code like the picture below.
-
Copy the html code below, then paste it to the HTML snippet you just added or just refer to the example code below. You must replace iFrame source address
href="xxx.html" to yours.
-
Please make sure that the target name is equal to the iFrame name. (
target="your-iFrame-name")
-
Push "Apply" button on the HTML snippet box, then adjust the HTML snippet's dimensions.
-
Everything is done. You just need to publish your website to your web server. (If you publish your site into local folder, upload iframes and your site via FileZilla or CyberDuck FTP client. You can refer to this tutorial.)
|
