I have a page with an iframe. My page has a banner/header that displays on the page. After the user clicks submit in the iframe form. I want the banner to go away.
http://todayshousingmarketvalues.com/
This is the page. If you put in an address and click submit you'll see what I need. Make up an address. You don't need to use your own. Nothing happens if you don't subscribe.
You can handle iframe's onload event. If both iframe and parent page are on the same domain - you can check iframe's contentWindow.location.href value and if it changes - that means user performed an action - hide the banner.
If domains are not the same - this approach won't work since access to that property will be denied. In that case you can set a flag on the parent, marking initial load of iframe. And change the flag on consecutive loads, e.g. call something like in iframe onload:
var initialLoad = true;
function checkURL() {
if (initialLoad) {
initialLoad = false;
} else {
document.getElementById("banner").style.display="none";
}
}
Demo: http://jsfiddle.net/MMa9w/ see the banner, then type anything and click the button
Related
I send messages to iFrame, but only on iFrame load event. Want to trigger it manually without page reload, after changing DOM.
Explanation: It is kind of survey and on page change I send page size. Problem happens when I insert new image in DOM, than I need to tell parent page and trigger the iFrame load event. The message goes parent->iframe, than iframe->parent only on iFrame load.
Instead of triggering a load event, you should use a message posted by your IFrame.
JavaScript in outer frame (this attaches an event listener for messages and shows an alert when a message is received):
window.addEventListener('message', function(e) {
// This check can be removed for testing purposes, but for security
// it's strongly recommended that you leave it in there and replace
// the domain with the one of your IFrame's src, to ensure you process
// only messages coming from your own code and not somebody else's.
if(e.origin != "http://yourdomain.com") return;
alert("Got a message: " + e.data);
});
JavaScript in inner frame (this sends a message to the parent window - it should trigger the listener there and show the alert):
// The second parameter can be replaced by "*" for testing, but again it
// is strongly recommended to use the domain you expect the outer frame
// to have, to ensure your message lands in the right window (in case
// another page loaded yours in an IFrame).
window.parent.postMessage("Hello World!", "http://yourdomain.com");
Instead of "Hello World!", you can also pass JS objects.
It also works the other way round: If you install a message listener in your IFrame as well, then you can also send messages from the outer frame to the inner one, using something like document.getElementById('myIframe').contentWindow.postMessage(...).
See also: http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage
I'm adding a chat feature to a couple of our websites. The chat will connect users with people at our help desk to help them use the websites. Our help desk folks want the chat window to appear like a tab on the side of the page and slide out, rather than popping up in a new window. However, I want to allow the user to navigate around the site without losing the chat.
To do this, I've been trying to move the entire page into an iframe once the chat starts (with the chat outside the iframe), so the user can navigate around the site within the iframe without losing the chat.
I used this answer to get started, and that works great visually. However, some of the javascript in the background breaks.
One of the sites is ASP.NET web forms. The other is MVC. I've been working with the web forms one first. Stuff like calling __doPostBack breaks once the page is moved into the iframe since the javascript context is left behind.
Once the user clicks on a link (a real link, not a __doPostBack) and the iframe refreshes, then everything works perfectly.
How I see it, I have a few options:
Copy all javascript variables from window.top into the iframe somehow. Hopefully without having to know all the variable names. I tried this.contentWindow.__doPostBack = window.top.__doPostBack, which works, but other variables are missing so it ultimately fails:
Somehow switch the iframe's context to look at the top window context, if that's even possible? Probably not.
Another thought was to not move the page into an iframe right away, but to wait until the page changes and then load the new page into a new iframe. But I'm not sure how to hook into that event and highjack it.
Something else?
These are sites for use by our employees only, so I only have to support IE11 and Chrome.
Update:
Thanks to LGSon for putting me on the track of using the target attribute (so I can use approach #3). Below is what I ended up doing. When I pop out the chat, I call loadNextPageInIframe(). I'm using jQuery here since we already use it on our site, but everything could be done without. I set the target on all links that don't already have a target pointing to another frame or _blank. I left _parent out, but I don't think we use it anyway.
I have a reference to my chat window div in a global variable called 'chatwindow'.
There still could be some cases where this doesn't work, such as if there is some javascript that sets window.location directly. If we have anything in our sites that does this, I'll have to add a way to handle it.
function loadNextPageInIframe() {
var frame = $("<iframe id=\"mainframe\" name=\"mainframe\" />").css({
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%",
border: "none",
display: "none"
}).appendTo("body");
$("form, a:not([target]), a[target=''], a[target='_top'], a[target='_self']").attr("target", "mainframe");
var firstload = true;
frame.load(function () {
//Runs every time a new page in the iframe loads
if (firstload) {
$(frame).show();
//Remove all elements from the top window except the iframe and chat window
$("body").children().not(frame).not(window.top.chatwindow).remove();
firstload = false;
}
//Make the browser URL and title reflect the iframe every time it loads a new page
if (this.contentWindow && this.contentWindow.location.href && window.top.location.hostname === this.contentWindow.location.hostname && window.top.location.href !== this.contentWindow.location.href) {
var title = this.contentDocument.title;
document.title = title;
if (window.top.history.replaceState) window.top.history.replaceState(null, title, this.contentWindow.location.href);
}
});
}
May I suggest you do the following
get all links
attach an event click handler to intercept when someone click a link
on click event, check if chat is in progress, and if, feed the iframe with the new link
var links = querySelectorAll("a");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function(e) {
if (isChatInProgress()) {
e.preventDefault(); //stop the default action
document.getElementById("your_iframe_id").src = e.target.href;
// anything else here, like toggle tabs etc
}
});
}
Update
To handle forms I see 4 ways at the moment
1) Add an onsubmit handler to your forms
function formIsSubmitted(frm) {
if (isChatInProgress()) {
frm.target = "the iframe";
}
return true;
}
<form id="form1" runat="server" onsubmit="return formIsSubmitted(this)">
2) Add a click handler to your buttons
function btnClick(btn) {
if (isChatInProgress()) {
btn.form.target = "the iframe";
}
return true;
}
<asp:Button runat="server" ID="ButtonID" Text="ButtonText"
OnClick="Button_Click" OnClientClick="return btnClick(this);" />
3) When a chat start, you iterate through each form and alter its target attribute
function startChat() {
var forms = querySelectorAll("form");
for (var i = 0; i < forms.length; i++) {
forms[i].target = "the iframe";
});
}
4) Override the original postback event (Src: intercept-postback-event)
// get reference to original postback method before we override it
var __doPostBackOriginal = __doPostBack;
// override
__doPostBack = function (eventTarget, eventArgument) {
if (isChatInProgress()) {
theForm.target = "the iframe";
}
// call original postback
__doPostBackOriginal.call(this, eventTarget, eventArgument);
}
Update 2
The absolute best way to deal with this is of course to use AJAX to load both page and chat content, but that likely means a quite bigger work load if your sites aren't already use it.
If you don't want to do that, you can still use AJAX for chat and if a user were to navigate to a new page, the chat app recreate the ongoing chat window with all its content again.
I suggest instead of loading content to and from iframes - build the chat as an iframe and use a jQuery modal popup on the page for chat.
You can fix the jquery modal to a fixed location and page scrolling is enabled by default. You need to modify css accordingly to make the popup remains on the same location.
If you go down your current path - you will need to worry a lot about how content is moved to the iframe and it might be difficult to re-use the chat on different pages depending on the content. For example, imagine you playing a video on the page and the user clicks chat - if you load the content to the iframe - the user will lose the status on how far he has viewed, etc.
as per my opinion, adding the whole website as an 'I-Frame' is not a good design practice, and not a good solution for the problem. My suggestion would be:
Ensure that the 'Chat' application is loaded in all the pages, across your website
Whenever the 'Chat' is started, either establish the 'web-socket' connection or somehow, maintain the State on the Server
Have the configuration of the 'Chat' as 'Minimized', 'Open' etc and store them in your cookie or session storage
On every page load, call the 'Chat' application too. Read the Chat related configuration from sessionstorage or cookie and maintain it's state as 'Minimized' or 'Open' etc, including the X and Y position, if you want to make it as 'Floated'
Every time, either fetch the entire conversation from the server via Ajax or try to store and fetch from 'Local Storage' and do Ajax only for any Updates from the other party
Use CSS based 'Float' related properties to make it float and sit at some side.
This will ensure that your chat is available for the user and yet he can navigate all through the site.
Clickjacking is when people trick users into clicking a button they're not supposed to, making them perform a malicious action.
I'm working on a product which, as an option for merchants, provides an iFrame component that can be embedded into a website to make a payment. Signed in users will see a button in the iframe that they can click to perform an important action. This action should only be called when the click is genuinely theirs.
If, for example, the iFrame's opacity is set to 0, then it can be positioned such that the button in our iFrame is invisible, but on top of a different visible button. Users can therefore be tricked into clicking it.
I think I have a method for preventing it, but I'm not sure if it's sufficient or not. The following code would go in the iFrame:
<script>
function frameVisible() {
var has_dimension = $(frameElement).is(':visible');
var is_visible = $(frameElement).css('visibility') == 'visible';
var is_opaque = $(frameElement).css('opacity') == '1';
var one_deep = (parent == top);
return has_dimension && is_visible && is_opaque && one_deep;
}
if (!frameVisible()) {
$(document.body).hide()
}
</script>
Basically, if the iframe is obscured in any way, the iframe content will be hidden, preventing any unintended clicks.
I'm just trying to find out if there's a way around the code provided here.
That is not sufficient.
Attackers can position their own elements above the <iframe>, and either leave a small gap for the user to click through, or set pointer-events: none to allow users to click through the cover.
AFAIK, there is no way for you to detect that.
I would like to prevent the user to access subpages of my jqm page. To do that I use the pagebeforecreate event to check a certain condition and depending on that, change the page displayed (cancel current pageload and redirect or normally load the current starting/main page). The Problem is, that I still see the page flickering up before the changePage() is executed even when I call the preventDefault() method. I also used a relative URL as the first parameter (to = 'page.php') of the changePage(to, options) and since my #subpage1 lies within the page.php it should open - which it did - but then the transitions are broken because no real refresh was done.
Note that I have a page.php including different #subpage's (such as #subpage1, #subpage2).
jQuery(document).on('pagebeforecreate', '#subpage2', function(event, data) {
if (!isCondition1() && !isCondition2()) {
// stop loading #subpage2
event.preventDefault();
jQuery.mobile.changePage(jQuery('#subpage1'), {
data: 'lang=de¶m1=foo¶m2=bar',
reloadPage: true,
type: 'get'
});
}
// go on loading #subpage2
});
jQuery(document).one('pageinit', '#subpage2', function() {
// do something
});
Have you tried setting the body style to display:none in the html? And then if the page loads correctly you can set it's display property? That should be a 'workaround' to prevent the flicker of the page?
I currently have an iframe within my main page that has a number of checkboxes that need to be actioned prior to leaving the iframe. i.e, if the user commences checking the checkboxes and half way through they then click back on the main page, i.e leaving the iframe, I would like to be able to trap/validate that they have left the iframe and prompt them with a message indicating this, say with a "Note: You will lose all data entered here - Leave: Yes/No?" type message.
Prompting a User to Save When Leaving a Page. This 4guys article sounds like what you need. It talks about the onbeforeunload event. There's some awesome posts here on stackoverflow about onbeforeunload too.
It appears that onbeforeunload indeed does not fire for an iframe. Bugger!
Here's some sample code that should work though. This will only work if you're in the same domain, otherwise same origin policy will prevent the iframe from talking back to the parent.
I also haven't tested these in many browsers so YMMV.
You've got two options here, depending on where you want to put the prompt for changes logic.
Option one involves the iframe telling the parent window when there's changes.
Parent window javascript:
window.onbeforeunload=closeIt;
var changes = false;
function closeIt()
{
if (changes)
{
return "Yo, changes, save 'em?";
}
}
function somethingChanged() {
changes=true;
};
Iframe javascript:
$(function() {
$('input').change(parent.somethingChanged);
});
Option two involves the iframe taking control over the parent window's onbeforeunload
Parent window javascript:
There is none :-)
Iframe javascript:
$(function() {
parent.window.onbeforeunload = myCloseIt;
$('input').change(somethingChanged);
});
var changes = false;
function myCloseIt()
{
if (changes)
{
return "Yo, changes, save 'em?";
}
}
function somethingChanged() {
changes=true;
};
In either option the naive changes variable could be beefed up a bit, probably using techniques from the 4guys article, to see if there's really been any changes.
If they're on different domains, but you're still in charge of "both sides" of the HTML, there's still some options, they're just harder.
xssinterface is a library that uses postMessage and location hashes and secret voodoo black magic to communicate cross site.