Open iframe source in new tab - javascript

I've got an iframe that people can navigate through to get to a specific place, but as it is cross-domain some of the javascript on the site doesn't work (Such as looking at product history for example...)
I've been trying to find a way to make a button that will take whatever page the user is on in the iframe and open that link in a new tab.
While trying to research if this was possible, all I could find is people opening links from within an iframe in a new tab, which is not what I need.
I need to make a button that onclick will open a new tab with whatever link the user is currently on in the iframe.
I haven't really tried many things because I cannot find anything on the subject (Probably due to terrible wording), but I'm thinking my best chance is jquery/javascript, however, I'm not very fluent in javascript.
So my question is, is it possible to open an iframes url into a new tab, and if so, what would be the most efficient way to do so?
The website that is in my iframe is cross-domain and I cannot edit its source.
What I currently have is this:
<iframe id="iframe" class="frame" name="iframe" height="100%" width="100%" onload="refreshLink(this.contentWindow.location.href)"></iframe>
Note: The src is set by javascript on page load.
Under that I have:
<script>
var hyperLink = document.getElementById("iframe").src;
function refreshLink(link) {
hyperLink = link;
document.getElementById("button").href=hyperLink;
}
</script>
Above all of that I have:
Open in R1
But, when I click the button at any given time it opens a new tab to the same url I was at before (a tab that goes to the same page the iframe is displayed on).

I believe this should be possible
For iframes displaying the same domain content you can get the current site url with something like this:
document.getElementById("myframeID").contentWindow.location.href
But for cross-domain iframes you will get the following error when trying to get the location on the site the same way:
VM2536:2 Uncaught DOMException: Blocked a frame with origin "https://example.com" from accessing a cross-origin frame.
However this seems to work to get proper URL from cross-domain iframes
document.getElementById('myframeID').src
To finish off you could do something like this (assuming you use jQuery by your tags):
$('body').on('click','#button', function(){
var url = document.getElementById('myframeID').src;
var tabOrWindow = window.open(url, '_blank');
tabOrWindow.focus();
});

Here's a starter. With markup like this:
<iframe id="myIframe" src="http://yourwebsite.com"></iframe>
Click here
Start with some JS that changes the anchor's href to the src of your iframe:
var hyperLink = document.getElementById("myIframe").src;
document.getElementById("button").href=hyperLink;
Add an onload attribute to your iframe:
<iframe id="myIframe" src="http://yourwebsite.com" onload="refreshLink(this.contentWindow.location.href)">
</iframe>
The line onload="refreshLink(this.contentWindow.location.href)" fetches the current URL of the iframe where the user's been navigating and sends it as an argument for the function refreshLink.
Then we can declare that function, and the full JS code would look like this:
var hyperLink = document.getElementById("myIframe").src;
function refreshLink(link) {
hyperLink = link;
document.getElementById("button").href=hyperLink;
}
This works, but it's subject to whatever policies each website has regarding iframes and http/https.

Related

Open all links in an iframe in a new tab (same domain)

There are loads of similar posts on this topic, but I tried all and none worked for what I'd like to do.
I've got an iframe which leads other pages on my domain.
<iframe src="test/index.html" frameborder="0" width="100%" height="100%" id="iframe" name="iframe"></iframe>
Note: I can't change the code of the pages inside the iframe.
Using jQuery, I'd like to open all links of 'text/index.html' in a new tab. How can I do that?
Thank you!
You can invoke a function in the iframe like this:
document.getElementById('targetFrame').contentWindow.targetFunction();
Now, you can do something like this:
var iframe = document.getElementById('iframe');
var links = (iframe.contentDocument || iframe.contentWindow.document).getElementsByTagName('a');
and then you can iterate the links and open them in new tabs/windows, using window.open. Some browsers will not allow you to do this due to security constraint. Now, if the iframe has some messaging with other windows, then you might want to read this article: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Finally, if none of these are available, you can just simply send a request to the page which is displayed in the iframe and when you receive the HTML, parse it, find the links and open them using window.open.

Read iframe redirect (same domain)

I'm working in writing a chrome extension, and as a result I have the peculiar situation of using non-cross domain Iframes, without the ability to alter the page being displayed in the frame.
When a user clicks a certain link, in he iframe, I want to run some JavaScript. The default behavior for clicking that link is to load page targetpage.com. I don't think it's possible, or easy, to read listen for a particular element being clicked inside an iframe
As a workaround, I figure I can check if the iframe reloads, pointing to targetpage.com, and then perform the action.
Note: the action is entirely in the parent page, let's imagine I'm just trying to trigger an alert box.
I know how to trigger JavaScript when an iframe loads. My three questions are:
1) how can I check the url of an iframe?
2) is there a way to check the iframe, url prior to targetpage.com being loaded. Esther than after?
3) is there a better solution?
You could listen to webNavigation.onBeforeNavigate in background page, it fires when a navigation is about to occur, and you could get url and frameId in the callback parameter.
This may not be the best answer because I haven't played around with this much.
Chrome has a webNavigation API that looks to be something which may come in handy for your extension.
However if you want to get the current domain you're on you'd use...
document.domain
If you're in a subdirectory of that domain you can grab that with...
window.location
It also works with an added hash to the url.
If you want the url without the hash you could use document.referrer or if you feel hacky you could do something like...
var str = window.location
var res = str.toString().split(str.hash)
document.body.innerHTML = res

iFrame redirecting homepage issue on mobile

I am creating my portfolio using a Bootstrap template (Freelancer). I have an iFrame embed that displays an e-catalog (located in a pop-up lightbox). For some reason when opening my website on a smartphone device, the page redirects automatically to the fullscreen version of the iFrame website without any prompting or touching. I've tried the 'sandbox' tag and it does not seem to work, but perhaps I am using it wrong. To clarify, the site/iFrame embed loads fine on desktop, but on mobile it redirects the homepage.
This is the iFrame code:
<iframe src="http://www.zoomcatalog.com/catalogs/kts-spring-2014/" width="100%" height="630px" frameborder="0" scrolling="no"></iframe>
The website is http://www.danieltomasku.net
Do I need to add some JavaScript to prevent the window from opening automatically? If so, how do I implement this? Should 'sandboxing' have worked? Should I put a div around the iFrame?
Any help would be appreciated. Let me know if you need more info/code. Thank you.
The site you are opening contains the following:
var iRegex = /android|(iP(hone|ad))/i;
if(iRegex.test(navigator.userAgent)){
var url= "<...>" + window.location.hash;
if(true) top.location=url; else window.location=url;
}
This JS redirects the parent page (your page [top window]) to another URL if the useragent matches android/iphone/ipad.
Just make it a linked static image. Otherwise you'd need to write a script to detect the location change attempt and override it. Besides, the iframe is messing with the framed page's analytics, counting each page view on your site as a view for the framed page.
Love the site by the way.

manipulate iframe content in phonegap app with javascript

I would like to access a form which is in an iframe. The page inside this iframe is from an other domain. However, I am inside phonegap/native (iOS). In a browser I noticed I can only access and manipulate the iframe content if the page is from the same origin. Because in phonegap, things like XSS do not exist, I would expect that I can access an iframe from an other domain.
Anyway, just in case this is possible, here is my code:
<iframe id="iframe" src="http://login.site.com" width="500" height="500"></iframe>
....
var $ifc = $('#iframe').contents() ;
$ifc.find("input[name=username]").val("Bob");
$ifc.find("input[name=password]").val("secret");
$ifc.find("input[type=submit]").click() ;
This also shows what I want to achieve; automatically fill in the login form and submit
Any suggestions ?
Cheers
Iframes don't work very well in Phonegap.
However, accessing the iframe through javascript should be possible.
var iframeDoc = document.getElementById("iframe").document;

Getting direct URL while clicking javascript button on specific website

I am displaying an online internal website.
Upon clicking on a button "A" it processes a task, and goes to another HTML page. However, this direct address is like "hidden" (hard to explain).
For example, for each page I am accessing by simple button click, it's always the same URL (like http://host.com for every page I display from them).
I am using Firefox, and I need to know how to get the exact HTML address (or direct URL) used for displaying these full new pages. I managed to do it few months ago, but not anymore.
It will help me to automate some tasks and bashing programs. I am openned to any linux browser in case you find a way to help me. Thanks a lot.
it sounds like domain masking is used. you could check the source and see if a frame is being used on the page. the source should indicate the src of the frame, revealing the location of the page.
<frame src="page.html">
If the button uses window.open to navigate to the url, you could override that method and intercept the url there:
var oldOpen = window.open;
window.open = function(){
console.log(arguments[0]);
oldOpen.apply(window, arguments);
};

Categories