manipulate iframe content in phonegap app with javascript - 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;

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.

Open iframe source in new tab

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.

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.

How to check whether iframe loads content

I have a site which embeds a survey from a different domain inside an iframe. However, in some browsers when third party cookies are disabled the iframe predictably is blank.
If the iframe does not load content I wish to show just a link instead of the iframe window itself, with javascript. So far I have
<iframe id="iframe" onload='setFrameLoaded();' width="600" height="500" src="about:blank"></iframe>
and the script
var frame_loaded = 0;
function setFrameLoaded() {
frame_loaded = 1;
}
But when I change the source to about:blank the iframe still loads okay (again, probably expected behaviour).
Can I check whether the iframe has content loaded (despite it being from a different domain)?

How to force a page to stay inside an iframe?

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).

Categories