Open external links in frames, like About.com? - javascript

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.

Related

How do I get Joomla to stop opening every link in a new tab?

I changed a domain name of my website, and now every link opens in new tab (menu, logo, external links etc.) I want to know how to get back to normal behavior when Joomla opens only external links in new window. How can I solve this and what could be the cause of it?
Link to my website: http://sparkle-soft.com
I'm using Joomla 2.5
You have a inline script tag in your head for some sort of specialtrack. There is a line of code within the function that is applying a blank target attribute to all links on your page:
links[i].setAttribute('target', '_blank');
Check to see what tracking you have added to your site, look for any options if provided that would allow you to change this. It could be coming from an extension or your template but hard to tell as it's inline, rather than a source file.

Controlling back/forward navigation of a *child* iframe?

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!

Open two iframes without full reload of the second iframe

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.

How do I use javascript to make my URL reflect site navigation? And also be linkable?

My website uses a single page, which loads all its content in iframes, and I would like to know how I can make the page URL change when each piece of content is viewed.
Then I would also like these URLs to work as links to the content.
Here is my site:
http://www.dosed.co.uk
If you click any project, you'll see what I mean. I want to be able to link someone to a specific project (so something like "http://www.dosed.co.uk?project=fish").
How can I do this with javascript?

Javascript/iframe/embed/object question

OK, so here is my issue. I'm building a system which will allow people to embed lists of links on their pages. When the link is clicked, i'd like to use something like Lightview or Lightwindow to open it up over the whole window, not just in the iframe.
I don't have access to the page that the user will be embedding this object into. Everything I've tried so far tells me that I can't open anything over the parent window, since I don't have access to it from the iframe or object, javacript security issue.
However, I've seen sites that do that kind of overlay. so it must be possible. If anyone can point me to any resources that could help, that would be great.
if it matters, i'm using Ruby on Rails...
Thanks...chris
It can't be done if the iframe is from another domain than the website, because:
You cannot change the dimensions of
the iframe from within it.
You cannot access the parent
document from within the iframe.
I suggest trying using some sort of JS file people will embed in they're website, in the place they want your links to be (something like Google Ads) and do a document.write to place
your links in their webpage. then, you will have access to the page, and can do a whole lot more :)
is this helping you?
As vsync said, you will have to have the user embed a script instead of the plain HTML.
This script has full control of the page, and if you also want it to be able to communicate with the framed document (your site), then you could use something like easyxdm to do cross document communication.

Categories