I have a greasemonkey script that opens an iframe containing a form from a different sub-domain as the parent page.
I would like to refresh the parent page when the iframe refreshes after the form submission
I am at the point where I can execute a function when the iframe refreshes, but I cannot get that function to affect the parent document.
I understand this is due to browser security models, and I have been reading up on using postMessage to communicate between the two windows, but I cannot seem to figure out how to send a reload call to the parent with it.
Any advice on how to do that would be very helpful
thanks
Use:
window.parent.postMessage('Hello Parent Frame!', '*');
Note the '*' indicates "any origin". You should replace this with the target origin if possible.
In your parent frame you need:
window.addEventListener('message', receiveMessage, false);
function receiveMessage(evt)
{
if (evt.origin === 'http://my.iframe.org')
{
alert("got message: "+evt.data);
}
}
Replace "my.iframe.org" with the origin of your iFrame. (You can skip the origin verification, just be very careful what you do with the data you get).
Related
I have a simple HTML page with an iframe. I set its src to another HTML
file and I can change the style of any chosen element at will using code
like this (a basic example):
function elementStyle()
{
var iFrame = document.getElementById( "iFrame" );
var element = iFrame.contentWindow.document.getElementsByTagName(
"table" )[0];
element.style.color = "#ff0000";
}
However the src of the iframe must be an external URL and cross-domain
restriction prevents me from accessing its elements. I have no control
over its content so I can't use postMessage() because I can't receive
any message posted.
Any ideas of a way to get round this?
Note: it must work for anyone with any browser so musn't use any special
methods (like jQuery, CORS etc).
Thanks
When my iframe loads I need parent page to load different content(header,footer) while iframe its still there. I added to iframe :
window.top.location = "http://mysite.com";
It loads the new parent page but its reloading over and over again.
How can I enable only one load/iframe load, or some solution.
I have tried with
window.onload = function() {
if(!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
}
but it does nothing.
Thank you.
you just can't reload the iframe parent only without reloading the iframe too! If you want to change some content in parent page you must do it with javascript from the parent page and not the iframe.
And if you want to catch the "iframe loaded event" you must do it from inside the iframe. Looks like an impossible situation but you can still do it!
You need to let iframe and parent page comunicate, and you can do it with html5 postmessage (works even if parent and iframe are in different domains!). If you need to have IE7 compatibility too you can use easyXDM javascript library instead of postMessage, just search for example in their site.
Simply do a postMessage from iFrame when jQuery(document).ready() (or any similar event) is triggered, the parent page must have a listner waiting for this message for trigger the header/footer/anything change event.
I am trying to open some site in iFrame which opens as popup.
Some sites does not allow itself to open in iFrame (Frame Busting).
I have searched for this . i Have got some solution also like
$(window).bind('beforeunload', function (event) {
return 'Custom message.';
});
beforeunload not work for me, as it will run even when navigating within my site
and also I tried
// Event handler to catch execution of the busting script.
window.onbeforeunload = function () { prevent_bust++ };
// Continuously monitor whether busting script has fired.
setInterval(function () {
if (prevent_bust > 0) { // Yes: it has fired.
prevent_bust -= 2; // Avoid further action.
// Get a 'No Content' status which keeps us on the same page.
window.top.location.href = 'http://mysiteurl/#';
}
}, 1);
above is also not working, it will redirect to the url which is being opened in iFrame.
So Is there any solution to open site (having Frame Buster) in IFrame.
Regards,
Sagar Joshi
For IE use this in your frame security="restricted"
<iframe id="frame_id" name="frame_name" security="restricted" src="page.html">
</iframe>
Edit: I was having the same issue but I needed scripts etc to run in my frame so security restricted was not good. Try using sandbox="..."
allow-forms allows form submission
allow-popups allows popups
allow-pointer-lock allows pointer lock
allow-same-origin allows the document to maintain its origin
allow-scripts allows JavaScript execution, and also allows features to trigger automatically
allow-top-navigation allows the document to break out of the frame by navigating the top-level window
Top navigation is what you want to prevent, so leave that out and it will not be allowed. Anything left out will be blocked
ex.
<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="http://www.example.com"</iframe>
a few notes:
1.i can not modify the iframe content to add the onload= function
2.the iframe has an id.
3.the iframe has no callback to its parent html page.
4.I use the prototype ,not jquery, for some old reasons.
i wanna do something when the iframe load finished.
but, i have tried the
document.observe('dom:loaded',function()
{
alert($('iframe-id')); >> **IS NULL**
})
and
Event.observe(window,'load',function(){..
alert($('iframe-id')); >> **IS NULL STILL**
...})
Did i miss some methods in prototype or javascript?
Thanks.
How do I use the JavaScript DOM to apply onclick events to links inside of an iframe?
Here's what I'm trying that isn't working:
document.getElementById('myIframe').contentDocument.getElementsByTagName('a').onclick = function();
No errors seem to be thrown, and I have complete control of the stuff in the iframe.
Here is some code to test and see if I can at least count how many div's are in my iframe.
// access body
var docBody = document.getElementsByTagName("body")[0];
// create and load iframe element
var embed_results = document.createElement('iframe');
embed_results.id = "myIframe";
embed_results.setAttribute("src", "http://www.mysite.com/syndication/php/embed.php");
// append to body
docBody.appendChild(embed_results);
// count the divs in iframe and alert
alert(document.getElementById("myIframe").contentDocument.getElementsByTagName('div').length);
It is possible for an iFrame to source content from another website on a different domain.
Being able to access content on other domains would represent a security vulnerability to the user and so it is not possible to do this via Javascript.
For this reason, you can not attach events in your page to content within an iFrame.
getElementsByTagName returns a NodeCollection, so you have to iterate throgh this collection and add onclick handler to every node in that collection. The code below should work.
var links = document.getElementById('myIframe').contentDocument.getElementsByTagName('a');
for(var i=0;i<links.length;++i)links[i].onclick=function(){}
also make sure, you run this code after the frames' content is loaded
embed_results.onload=function(){
// your code
}