Tuesday 21 February 2017

Iframe

HTML inline frame element, which embeds independent html document into current document, it means display website with in the website.
Ex: <iframe src="http://bujjibau.blogspot.in/" width="300"  height="300"></iframe>

Advantages Of iframe:
1. Embedding third party media
2. Embedding your own media.
3. Embedding code samples
4. Embedding third party applets (like payment forms)
5. Displays the embedded video clearly.

Create Outside links and that loads in iframe:
<div><a href="http://bujjibau.blogspot.in/" target="internal">Developers blog</a></div>
<iframe src="http://www.xyz.com" style="width: 90%; height: 300px" name="internal"></iframe>
By giving the <iframe> a "name" attribute, and using the "target" attribute of the <a> tag to specify that name, you get a link that loads in the <iframe>.
Exp: Initially xyz.com loads in iframe when we click on developers blog anchor tag will load that developers blog in iframe.

Note: To deal with browsers, the browser do not support iframe add a text between the iframe opening and ending tag.

Attributes:
1. It will support all global attributes.
2. allowfullscreen (this attribute can set to true the screen allowed to placed into full screen by calling element.requestFullScreen() if this is not set the element can not placed into full screen mode and also you can call browser specific methods
 Ex: a. element.mozRequestFullScreen() for gecko 9.0 and latter.
        b. element.webkitRequestFullScreen() for chrome17 and latter. )
3. height set with pixels.
4. width set with pixels.
5. Sandbox (If specified as an empty string, this attribute enables extra restrictions on the content that can appear in the iframe. The value of the attribute can either be an empty string (all the restrictions are applied)).

Sandbox keywords: It will support only HTML5.
a. allow-forms (it allows to submit the forms if this key work not used this will not work)
    Ex:<iframe src="demo_iframe_sandbox_form.html" sandbox="allow-forms"></iframe>
You can apply same above example to below points also
b. allow-modals
c. allow-allow-orientation-lock
d. allow-pointer-lock
e. allow-popups
f. allow-popups-to-escape-sandbox
g. allow-presentation
h. allow-same-origin
i. allow-scripts
j. allow-top-navigation.

You want to give more than one keyword see below example
Ex: <iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="https://platform.twitter.com/widgets/tweet_button.html" style="border: 0; width:130px; height:20px;"></iframe>

4 comments:

  1. Nice blog. Thanks for sharing such great information.Inwizards Inc is a Angularjs Development company offers quality iangularjs app development services best in web industries. Intrested click here - AngularJS Development Company, Angularjs freelance work

    ReplyDelete
  2. Hi,
    Thank you so much for taking effort to share such a useful information. I will definitely share this Ecommerce Web Designing Company Hyderabad .
    Aapthi Technologies

    ReplyDelete
  3. Such a useful blog that you have posted. Please share more details about it and it is very useful blog.
    Taxi Services in India
    https://www.bharattaxi.com/

    ReplyDelete
  4. This is really a wonderful blog and I personally recommend to my friends. I’m sure they’ll be benefited from this site Keep update more excellent posts. We would like to tell you we do provide Android App Development Services , AngularJS Development Services, React native Development Services, Python Development Services etc.

    ReplyDelete