Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Better alternative to an iframe to display tab content?

Tags:

javascript

html

css

tabs

iframe

I have a page with an iframe to feature the contents of the clicked tab. There are 3 tabs and 1 iframe. The sources of the contents relating to each tab clicked are formatted and coded in other html & css files.

What is another alternative to using an iframe, because I noticed that when the tab is clicked, it still shows the white background, similar to when a new page is loading?

Here's my code:

<div id="tabs"> <div id="overview">   <a target="tabsa" class="imagelink lookA" href="toframe.html">Overviews</a> </div> <div id="gallery">   <a target="tabsa" class="imagelink lookA" href="tawagpinoygallery.html">Gallery</a> </div> <div id="reviews">   <a target="tabsa" class="imagelink lookA" href="trframe.html">Reviews</a> </div> </div>  <div id="tabs-1">   <iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0">   </iframe> </div>
like image 649
laura Avatar asked Jan 20 '10 16:01

laura

People also ask

Is there a better way than iframe?

Use the embed Tag as an Alternative to Iframe in HTML The embed tag is similar to the object tag, and it is used for the same purpose. We can embed various external resources in our web page using the embed tag. We can embed media like PDF, image, audio, video, and web pages.

Why iframe is not recommended?

Iframes Bring Security Risks. If you create an iframe, your site becomes vulnerable to cross-site attacks. You may get a submittable malicious web form, phishing your users' personal data. A malicious user can run a plug-in.

Are iframe deprecated?

IFrames are not obsolete, but the reasons for using them are rare. Using IFrames to serve your own content creates a "wall" around accessing the content in that area. For crawlers like Google, It's not immediately clear that cotent in an iframe will be ranked as highly as if the content were simply part of the page.

Can you open a new tab from an iframe?

By adding target="_blank" to the anchor, it will open it in a new tab. By adding target="_parent" to the anchor, it will open it up in the same window like a normal link.

1 Answers

The only alternative to using IFRAMEs to load dynamic content (after the page has loaded) is using AJAX to update a container on your web page. It's pretty elegant and usually faster than loading a full page structure into an IFRAME.

  • Ajax with JQuery (use this and you will be loved on SO; the AJAX functions are great and simple)
  • Ajax with Prototype
  • Ajax with MooTools
  • Standalone Ajax with Matt Kruse's AJAX toolbox (Used to use this, using JQuery today because I needed a framework)
  • AJAX with Dojo (Said to be fast, but AJAX is not as straightforward)
like image 189
Pekka Avatar answered Oct 05 '22 16:10

Pekka
Sign in to Comment

Related questions

Does a Crashlytics-like service for web app exists?
AngularJS : ng-include and ng-controller
Automatically set arguments as instance properties in ES6
How to use XHR API in Node.js?
Click event not firing when React Component in a Shadow DOM
What's the difference between ES6 Set and WeakSet?
How to profile and get Javascript performance [duplicate]
Can I define custom operator overloads in Javascript? [duplicate]
Getting hash parameters from request url
socket.send outside of io.sockets.on( )
JS statement separator with commas
How do I load third party JavaScript from a CDN when using RequireJS?
function wait with return until $.getJSON is finished
get point coordinates based on direction and distance (vector)
Disable javascript analysis in resharper?
Javascript - catch access to property of object [duplicate]
What is the purpose of angular-sanitize ?
Two-way data binding (Angular) vs one-way data flow (React/Flux)
Difference between getBoundingClientRect().top and offsetTop?
Javascript in a View Component

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!