I'm working on a simple Javascript-based windows "app" (not a website, just some HTML & JS files all in a single folder that will be used on a local PC).
The startup page is Page1.html. This page contains 2 buttons ("back" and "forward"), and an iframe which displays the content of Page2.html. And Page2.html also contains an iframe, which displays various other pages in the same folder (we'll call these the "color" pages --> Red.html, Green.html, Blue.html, etc).
So in other words, when Page1.html is started up, you're looking at the contents of an iframe inside of an iframe (which would be Red.html, etc.).
So here's what I need to accomplish...
I need to use the back/forward buttons on Page1.html to navigate between the various "color" pages (which are framed inside of Page2.html).
I've found that it's easy to navigate backwards/forwards an iframe that's on the same page as the JS that's controlling the iframe, by using something like...
$(document).ready(function(){
$("#back_button_on_page1").mousedown(function(){
document.getElementById("iframe_on_page1").contentWindow.history.back();
});
$("#forward_button_on_page1").mousedown(function(){
document.getElementById("iframe_on_page1").contentWindow.history.forward();
});
});
etc etc.
But that's not what I need. What I need (and can't figure out how to do) is to control an iframe that's on another page, like so...
$(document).ready(function(){
$("#back_button_on_page1").mousedown(function(){
document.getElementById("iframe_on_page2").contentWindow.history.back();
});
$("#forward_button_on_page1").mousedown(function(){
document.getElementById("iframe_on_page2").contentWindow.history.forward();
});
});
I've put the above JS in a single file (Main.js), and then called that file from both Page1.html and Page2.html (after I included the jQuery libary on each page, of course). But it doesn't work.
So... does anyone know how to accomplish this?
BTW- if it makes any difference, the solution only needs to work in Chrome.
Thanks!
Related
is there any possibility to make smooth slide transition between two seperate html files?
Like for example.
On one html is
Link
and after clicking this link page is not reloading, just sliding to the second file?
You have to load the second HTML file into an iFrame or into a DIV by ajax, then slide it into view. You can use jQuery for that and for easy access to animations.
You may also would like to update the URL of your page, for that you can use location.hash to do it without reloading the page. You can also check for observehashchange plugin for jquery to check for the hash change when a user changes the URL.
You can view a sample here.
To have Google access the pages, you can add a sitemap.xml to your site to describe the pages and you may also have to setup webmaster tools to provide Google with useful information about your site. Here you can add the links and Google will got it. I have a page where more than 5000 links are seen by Google, however they aren't on any page by default.
But if you want to have normal <a> links on your page, you can use a simple jQuery to trigger the animation instead of going to the link.
Go to page 2
Go to page 3
Go to page 4
<script>
function LoadPage(page) {
//Put your page loader script here
}
$(document).ready(function(){
$(a).click(function(event){
event.preventDefault();
var page = $(this).attr('href').substr(1);
LoadPage(page);
});
});
</script>
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.
There is a need to have a takeover page when users visits the website e.g. www.domain.com and instead of displaying the contents immediately a splash page is displayed. They then have the option to visit the home page by clicking on a link.
Is there a way to do this without changing the code on the home page with the exception of including a javascript file that accommodates the requirements i.e. takeover the page with another HTML page?
Is there an example I can find that does the above?
You could do a DNS "rewrite" to an other IP and on the other Webserver you capture or simple copy/paste the original HTML contents and show it but also add this HTML splash notice.
But there is no way of adding a splash page without changing the content of the page or having access to the code.
If you have access to the HTML code, you can include a JavaScript file on which you have access, maybe also on an other server. Also add one noscript tag for visitors without JavaScript disabled.
Example:
<script src="http://www.asdf.com/you/have/access/to/this/file.js" type="text/javascript" />
<noscript>SPLASH NOTICE</noscript>
How the file.js should look like you can ask an additional question. Or check on G.
The good thing with this "remote" JavaScript file is, you can remove the splash notice later from the file without touching the original code again.
I need to open pages in frames exactly how About.com does it. (For example go to http://netforbeginners.about.com/od/antivirusantispyware/a/malware101_2.htm and click on an external link like Cexx.org)
It looks like there is some kind of script running that makes any external link open in that way.
How can I implement the same?
What happens is that a new page is opened on about.com consisting of the html in the top and an iframe in which the link is opened. You can do this using basic JavaScript code.