I have a portfolio page that embeds around 12 iframe elements. I am wondering if there is a way to cache or autoload the iframe elements so that I do not need to reload every time the website loads.
Here are what my iframe elements look like:
<iframe src="http://iframe.url" width="300" height="600" frameborder="0"></iframe>
The iframe element houses banner advertisements, consisting of images, HTML, and JS code. Please let me know how to accomplish this task. Thank you for your help!
I'm quoting the information here. If I understand what you are wanting, this looked promising.
Friendly Iframe
This technique is for ads. It's not really an iframe loading
technique, but more of a way to use an iframe to hold ads. The magic
is not in how the iframe is loaded, but in how the main page, the
iframe and ad codes work together. It works like this:
Create an iframe. Set the source to a small static html page from the same domain
Inside the iframe, set the JavaScript variable inDapIF = true to tell the ad it is loaded inside a friendly iframe
Inside the iframe, create an script element with the ad url as the source. Load the ad just like a normal JavaScript ad
When the ad has finished loading, resize the iframe to fit the dimensions of the ad.
The Friendly Iframe works in all browsers.
There were other techniques listed, but this seem to fit your use case. See the other methods at Iframe loading techniques and performance
If you are wanting a method to force the iFrame to reload, here is an SO answer on that. How to force an iFrame to reload once it loads
You can set html meta tag for url in iframe.
<META HTTP-EQUIV="EXPIRES"
CONTENT="Mon, 22 Jul 2018 11:12:01 GMT">
This will cache the results of iframe.
Even you can use AJAX to load the contents. This will not reload the entire page, instead i will change contents dynamically. Cache AJAX results to save bandwidth.
Related
I have a wordpress website, where I have pages with artists. This is an example: http://chasefetti.paradigmrecordsinc.com/ of a page from my website
On the top I have an iframe from arena.com
I want after the page loads to click the play button.
If I do it on the arenas page http://arena.com/artist/chasefetti like this (using firebug):
document.getElementsByClassName("fg icon-play-fg")[0].click()
it works, but on my website I guess it doesn't know about accessing the iframe.
How can I specify to access that iframe ?
Also the full mission that I gotta do is to play that button for each page. I am thinking to add a jquery that does what I want to do, to the templates page.
My main problem is accessing that element from the iframe
As far as I know(I tired it once) you can't do that, unless the source of the iframe is on the same site as yours, which isn't the case here.
Also check this same-origin policy.
I have an AngularJS application which runs under an iframe in a different website. I have the code of the website.
I need to open a new iframe to the same AngularJS application but to a different route. I don't want to load all the application again in the new iframe. I am looking for something that will duplicate existing instance of a window content, or maybe open a new iframe of the same application without loading the whole app again.
Here is the code explanation:
I have this html page:
<div>
<iframe src="www.myapp.com/books"></iframe>
</div>
www.myapp.com/books is an AngularJS application so it loads a lot of dependencies, execute a lot of code and make a few backend calls. I want to add a button that it's click will open another iframe to the html page:
<div>
<iframe src="www.myapp.com/books"></iframe>
<iframe src="www.myapp.com/names"></iframe>
</div>
The new iframe will open the same app but different route. Unfortunately this will cause a full loading of the application for the same iframe, and I am looking for a way to prevent this. Like cloning the same instance of the iframe and route to the new location without a full reload..
Any idea?
Lets talk JQuery on this one.
Say you have your nice iframe (iframes aren't actually very nice) element
<iframe id="original" src="www.myapp.com/books"></iframe>
take note of the id tag.
then you got your javascript, enclosed in tags
var newIframe = $("#original").clone();
$("body").append(newIframe);
LINK ---> Check this all out at JSFiddle <--- LINK!
The best thing to do is probably write the html/javascript/css of your application as text in the second iframe.
You can get the contents of the first iframe
page=$("#iframe1")).contents().find("html").html();
and then set it to your second iframe
var doc = parent.$("#iframe2")[0].documentElement;
doc.open();
doc.write(html);
doc.close();
You may not want to do a full copy like this, but I think this is a starting point.
I think it's mandatory that your application resides on the same domain of the website hosting it, or this will fail for cross-domain scripting security reasons. You would have to change the design of the whole thing if so, since you cannot manipulate an iframe on a different domain.
Information taken from How to insert html in iframe and Getting the html content of an iframe using jQuery
EDIT
What you want is probably not iframes. You can load the javascript for your application once in the main webpage. Then that javascript should download (or create) html elements, and inject them into a div. Doing so, the javascript for your application can manage as many subframes you want. The downside is that you must probably change a lot your application: now it is designed to be loaded as a webpage, and should be rewritten to be a js that manages some divs putting content into them. I don't see another solution, unfortunately.
I want to allow any page to be loaded inside an iframe. It's for teaching purposes so I want to know if it's possible to force let's say:
<iframe src="http://www.wolframalpha.com/input/?i=5*sin%28x%29" width="400" height="100">
to stay inside the iframe. By default it has some kind of javascript that opens in full page.
UPDATE: What if i use frames? (please don't throw bricks at me) Could they know if the page is inside a frame?
If the page itself wants to break out of being framed with it's own javascript (which apparently this page is doing), it can do so and I know of no way to prevent it other than turning javascript off in your own browser which obviously isn't an option for general viewing.
On some browsers, you can set an attribute on the iframe element that sets a security policy that prevents the iframe from executing JavaScript. I don't remember the attribute name and not sure which browsers support it (I'm sure ie does, not quite sure about the others). If you have problem finding more details, I'll look it up when I get home (on a mobile right now)
edit: found it - security="restricted". Seems to be IE-only.
If you have links outside of this iFrame and want them to load into that iFrame on the same page, you'll have to give it a name, then target the named iFrame within your link's href.
<iframe src="http://google.com" name="myframe" hieght="100" width="100"></iframe>
<br />
Derp.
However, if you're loading a page into your iFrame that's loading links with target="blank", then those will go to a new window; unless you don't have access to those pages, you won't be able to change the links (short of writing JS to dive into your iFrame, etc).
I have a page with content loaded in via iframe, and the pictures within the content area open up in MilkBox, similar to LightBox. Here's the URL so you can check it out:
http://interplay2010.com/
Under the Media section, the pictures open up within the iframe. I would like the pictures to open up outside the iframe, but I have no idea how to do this.
First of all your page loads much too slow. Try to use compression. You also use 15 external JavaScripts and 7 stylesheets and 20 external background images, thats quite a few HTTP Requests. You also mingle mootools with YUI. Why don't use just one Framework?
Enough nagging, now to your question: The milkbox is set up inside the iFrame, so in order to let the pics popup outside the iFrame you would have to alter Milkbox itself. That is 770 lines of JavaScript. Your best bet is to find the right method inside Milkbox, changing the target of the popUp to its parent frame; that is where the navigation and background picture resides in.
http://interplay2010.com/scripts/gallery/milkbox.js
One thing that bugs me about IE is that when it goes to load a page with an iframe it will wait until the iframe has finished loading before it will render the page. Firefox by contrast will render all the other page elements while the iframe is loading which is really nice if the iframe takes a long time to load because it gives the user some feedback that the page is progressing. It also allows you to do things like display a "iframe loading" messege while the frame loads and swap it out onload of the iframe.
So, I am wondering if anyone has found a workaround for this. Ideally, I'd like to see a cross browser solution that shows a progess bar as an iframe loads on the page. Short of that I'd take a method of implementing an iframe that forces IE to first render the page then load the iframe.
I have seen a couple of interesting jquery progress bars like:
http://plugins.jquery.com/project/jQueryProgressBar
But...(and correct me if I'm wrong here cause my understanding is shaky)...it seems to me the jquery bars only render after the DOM has loaded. In IE the iframe content is not shown until after the DOM is loaded so showing a progress bar at that point is irrelevant.
I've also tried setting the iframe src to loading.htm and then onload switch the src to the content I want. Sadly IE still will not render the page until the final content page comes up (seems strange to me).
Help me stackoverflow, you're my only hope.
What if you were to load the page with an XmlHttpRequest and then replace the contents of the document as/when it loads?
<!-- jQuery example: -->
<div id='content'>Loading...</div>
<script type='text/javascript'>
$("#content").load(url);
</script>
You could set the location of your iframe using JavaScript after the parent window has loaded.
<body onload="document.getElementById('myIframe').location='someurl';">
<iframe id="myIframe">
</body>
Would be the most rudimentary way to do it.