I'm looking for some help on what should be a basic script (I think), but I can't quite figure it out myself..
I have a page, with an iFrame, displaying a page that I only have access to the header.
I'd like to make it so that when someone clicks ANY link ( tag) in the iFrame window, it scrolls my parent page to the top (or a specific location).
Is this possible?
Edit: Also, if it's important, I'm already using David Bradshaw's iFrame resizer script to resize the frame on the fly, which uses postmessage to communicate frame->page. https://github.com/davidjbradshaw/iframe-resizer
Edit2: The parent window and iframe window are cross-domain
See Trigger events in iframe's parent window
Add some JS to your iframe page:
$(document).ready(function(){
$('a').click(function(){
window.parent.$(window.parent.document).trigger('scroll');
});
});
Then on the parent page:
$(document).bind('complete', function(){
//Add scroll code.
});
You could use post message to do something similar, but if you control both pages and they are on the same domain, this should work. If they are on different domains (which you didn't specify) you are stuck using postMessage which I believe isn't entirely cross-browser complient and therefore won't work on all settings and there really isn't a fallback.
If you want to use postMessage and you are using a plugin, just do something like
window.addEventListener("message",function(event){
if(event.origin == 'http://yourdomain.com'){
if(event.data == 'messageString'){
//Add scroll code
}
}
});
Related
I'm creating a single-page web app that has 3 parts:
A header
A sidebar for navigation
An i-frame to show the main page content
The header and sidebar should never reload after the first page load - only the i-frame. I'm using the History API (i.e. pushstate) to handle history and navigation.
The problem I'm having is if someone types in a url directly to any page in the site, I want to load the header and sidebar and then load the page they went to in the i-frame. If they're already on the page and they click a link to a different page, I only want it to load the new page in the i-frame. I'd like to do this without messing up the navigation history as well.
How do I detect this and load the content appropriately?
In the iframe you would use a little piece of Javascript looking at window.parent and window.top like this:
Javascript in iframe
if (window.parent == window.top) {
// user loaded the iframe, go to parent
window.location = "<your parent url>" + "?iframe=" + window.location;
}
Then in the parent load the iframe that is indicated by $_GET['inframe']:
PHP in parent
if (isset($_GET['inframe']) {
loadIframe($_GET['inframe']);
}
where I made up a loadIframe() function, since you didn't provide any code, so you have to replace that with your own.
For security reasons you may want to filter the input with filter_input():
PHP in parent
if (isset($_GET['inframe']) {
loadIframe(filter_input(INPUT_GET, 'inframe'], FILTER_VALIDATE_URL);
}
And perform further checks. This way you can prevent people from using the iframe parameter to inject something malicious in your code, or from loading just any iframe they please.
Instead of an iframe you could use AJAX to load content, and avoid this problem altogether. An iframe however allows for a more traditional way of loading content.
I have a same domain page loaded inside an iframe (using sandbox attribute). I use the following code to prevent clicks (and all other elements) from navigating away form the page:
$('#preview_frame').contents().find('body *').off('click').click(
function(event){
event.stopPropagation();
event.preventDefault();
}
);
However it seems that other Javascript on the page is redirecting the navigation via window.location.href or window.location.replace.
I cannot change the code of the pages inside the iframe as they are proxied from other sites.
I tried using the iframe unload event without success.
I need to disable the ability to navigate inside the iframe no matter what/how it is done. I am not talking about top parent navigation which can be disabled with the sandbox attribute, I am talking about the navigation INSIDE the iframe itself.
Is it possible to accomplish that?
Your code seems correct. Remove the sandbox attribute if the page inside iframe is from same domain. Hope it will solve the problem.
Sandbox attribute always treats contents as unique origin.
I have a page where I modded an app to prepopulate a number of fields. I would like to automatically have the 'submit' button be pressed/submitted when the page loads. I have tried things like:
<script type="text/javascript">
function autoclick() {
document.getElementById('buttonid').click();
}
</script>
with
<body onload="autoclick()">
But it does not work.
Any advice would be greatly appreciated!
Thanks
(It is the iframe on this site: http://abraxas.pw)
I see that your iframe is in the same domain and hence it will possible for you as the cross-domain security may not apply.
Give your iframe an id. And then:
document.getElementById('iframeName').contentWindow.document.getElementById("buttonid").click()
More info here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting
Make sure that the DOM is fully loaded before you fire your Javascript. Wrap this code into body load or iframe load.
Update:
If the iframe is in the same domain and is in your control, you don't need to do all this. Just fire the click from domloaded of jQuery, or place your code at the end (just before body ends). It will work.
Seeing your code, you have defined the function in the head and are calling it at body load. Place the function and the call at the end of the body.
You cannot do it in iframe for security reasons: http://pipwerks.com/2008/11/30/iframes-and-cross-domain-security-part-2/
Content coming from different domain in iframe can't be controlled in your page using javascript.
Browser treats iframe as a different window so you've no access over it. it's something like trying to access content of different window open in your browser from your own window(which is obviously not possible)
I got stuck in a problem here. I have a fancybox inside an iFrame, and it works normally, but I need it to extend outside the iFrame so it can fill the whole screen (I mean extend to it's parent).
Does anybody knows how to do that?
If both the page and the iframe are in the same domain, you can open the fancybox window in the parent from inside the iframe. Check out the demo.
Parent Window (contains fancybox script, css and iframe)
<iframe src="child-page.htm" height="250" width="500"></iframe>
Child Page (contains script to call fancybox in the parent)
$('a').click(function() {
// target the parent window (same domain only)
// then call fancybox in the parent
// You can add any HTML you want inside the fancybox call
window.parent.$.fancybox('<img src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg" height="333" width="500">');
});
It's not possible. Iframes are independent pages and can only interact to the parent via JavaScript, and even then it's shady behavior.
Your fancybox cannot extend out of the iframe no matter what you do, but with some work you could call to one on the parent page via JavaScript.
This post will answer your question in both directions (parent -> iframe, iframe -> parent): Invoking JavaScript code in an iframe from the parent page
As a side note, iframes fell out of vogue about 5 years ago. I'd avoid them in any new production.
Cheers. :)
I have an iframe that displays a flash banner ad which has clickable links. Is there anyway to force the links to open in parent window, without putting JS on the page that opens or changing the flash file?
For example, is there something i can do to the iFrame to force links to open in its parent?
This little snippet should do it:
if (top.location != location) {
top.location.href = document.location.href ;
}
No, you absolutely cannot do this. Your ad is likely served from a domain different than the rest of the page outside of the iframe. The only security restriction applied to JavaScript is called same origin execution. A browser will not execute any JavaScript that originates in a domain different than that of the effect page/window. As a result JavaScript is not your answer.
If the links were HTML, yes. But since the links are embedded in the SWF itself, there is no way to change their targt, AFAIK.