So, I have an iframe inside my application page (different domains) where the iframe has few fields and a hidden button that has a click event on there to do all the necessary stuffs (like the CRUD operation). The post is called via ajax, so there is not POST method on the iframe. The parent page has a button which is what should be used to when clicked, should trigger the click event inside the iframe. I did look into the postMessage and cross-origin and was able to find something that i have implemented on my solution. With that being added, when I click on the button on the parent page, nothing happens. I do not see any console error but nothing fires. This is what I have in my code.
<div id="main">
<iframe id="cardIframe" src="#($"https://localhost:44320/handlers?userId={Model.UserId}")"
width="100%" height="300px" style="border: none;" scrolling="no"></iframe>
<hr class="mb-4" />
#Html.UI().Button("Continue to Checkout", size: UIElementSize.Block, uiClass: UIElementClass.Primary, htmlAttributes: new { #class = "checkoutsubmit" })
<script type="text/javascript">
$('.checkoutsubmit').click(function (e) {
var iframe = document.getElementById('cardIframe').contentWindow;
window.iframe = iframe;
iframe.postMessage("createvault", "*");
});
</script>
And in my iframe application (http://localhost:43402)
<script type="text/javascript">
window.addEventListener("click", clickEvent, false);
function clickEvent(event) {
$('.processbraintree').trigger('click');
}
$('.processbraintree').click(function(e) {
..Do something
});
</script>
Not sure what am I doing wrong here. The fact that I do not see any error on the console doesn't help any. I have to have the iframe do the post of the form as it has all the braintree dropin ui stuffs. So, the parent has to be able to trigger the event inside of an iframe which currently does not happen right now.
Related
Here I have two asp.net mvc websites . From first website i have one link to second website. So first website will call the second's action. I want to open on page in new tab and current tab should redirect to my first website. This action will return one view.
My approaches in view
1.
$(document).ready(function (e) {
window.open("/newpage");
window.open("/site1", "_self");
});
Browser popup blocker will block this. Because there is no user event . So I tried different approach
2.
$(document).ready(function (e) {
$("#input").on("click", function () {
window.open("/newpage");
window.open("/site1", "_self");
});
$("#input").trigger("click");
});
<label id="input" style="display:none;">test one</label>
I have triggered one event. But still its blocked. This two approaches is working fine if popup blocker is disabled.
I want to open page in new tab without disable the popup blocker.
NOTE: This two website comes under same domain name . eg: abc.com\siteone and abc.com\sitetwo
From first website i have one link to second website. So first website will call the second's action. I want to open on page in new tab and current tab should redirect to my first website.
The way I've done this the once or twice that I had a really good use case for it was to use a link element with a click handler: The click handler opens the new window, and the link element's default action follows the link, taking the existing window to the new location. That way, it is a user-initiated action. This works in every browser I've tried it in. I should note that it tends not to work in things like jsFiddle or jsBin, because of how they wrap things.
So in your case, the link's href would be where you want them to go on the first website, and the window.open would be for the second website.
Example:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Double</title>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
Click me
<script>
document.querySelector("a").addEventListener(
"click",
function() {
window.open("http://google.com");
},
false
);
</script>
</body>
</html>
Hi I tried to make a div remove after clicking the facebook like button in it but Cant do it
here is my code
<div onclick="this.parentNode.parentNode.removeChild(this.parentNode);">
<iframe id='theiframe' scrolling='no' frameBorder='0' allowTransparency='true' src='http://www.facebook.com/widgets/like.php?href="www.facebook.com/makestream"&layout=standard&show_faces=true&width=53&action=like&colorscheme=light&height=80' style='width:53px;height:23px;overflow:hidden;border:0;opacity:"0.8";filter:alpha(opacity="0.8");'></iframe>
</div>
is there a way to remove the div or the ifreme after clicking the facebook like button ?
You cannot capture the click event in the iframe area, since it's handled by iframe itself and won't bubble up to the DIV parent. This question on SO may be helpful to you: capture click on div surrounding an iframe
I can imagine one workaround though: take use of Facebook's SDK and register a listener on the action on like button(see this facebook doc). This article "How to execute JavaScript when the Facebook Like button is clicked" gives some examples.
I'm not sure about your JavaScript.
Try this:
<div onclick="this.parentNode.removeChild(this);">
<!-- iframe -->
</div>
UPDATE:
I don't think this is possible.
The click event on the FB Like button will not propagate out of the iframe.
Here's an example: http://jsfiddle.net/kboucher/pdvdH/
Facebook provides a callback function when someone clicks on the like button :
https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
I have a page where it loads an iframe (contains a form on same domain) which is hidden until the user clicks on a button, which invokes jQuery slideToggle() to show/hide it.
When a user submits the form it loads a 'thank you' page in the iframe. What then happens is that if the user then clicks on the button again, jQuery checks the ID of the iframe body element to see if the form is there, if not then it loads the form iframe and displays it.
The code I have got works in Chrome but falls over in Firefox;
Error message in console => TypeError: frames['form-iframe'] is undefined
(and I imagine IE when I get to testing it).
Any ideas on why, or how to solve this issue would be greatly appreciated.
HTML snippet
<label id="tell-a-friend-button">
<div class="radio-button radio-button-grey">
<div class="label-text">YES</div>
</div>
<span>Tell a friend</span>
</label>
<div id="tell-a-friend">
<iframe src="me.asp?email=foo" frameborder="0" id="form-iframe"></iframe>
</div>
jQuery snippet
$("#tell-a-friend-button").click(function(){
// set iframe content
$("#form-iframe").ready(function () {
var frame = $('body', frames['form-iframe'].document).attr('id');
if (frame == "tell-form") {
$('#tell-a-friend').slideToggle();
} else {
// is the thank you page
// load the iframe
$("#form-iframe").attr("src", "me.asp");
}
});
});
I am doing some twitter authentication in classic asp (I know, but I can't change it). What I am doing is opening an authentication page in a popup via jQuery/JS with window.open that handels all of the rest/oauth authentication and then returns to the same page with the oauth keys I need. I would then like to close the popup and fire off some jQuery hide/show events without refreshing the page.
Code to fireoff the popup and authentication script:
jQuery(document).ready(function() {
jQuery("#twitter-button").live("click", function() {
jQuery("#twitter-button").attr("value", "Processing");
jQuery("#twitter-button").removeClass();
jQuery("#twitter-button").addClass("twitter-button-processing");
window.open('authentication.asp','_blank','width=600,height=400');
return false;
});
});
I then have the following code on the same page nested in some ASP for when we are redirected back:
if Session("OAUTH_TOKEN") <> "" And Session("OAUTH_TOKEN_SECRET") <> "" Then
%>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
window.close();
// I'd like to show/hide new buttons on the parent page here
});
</script>
<%
End If
The goal is to change the button with a class of twitter-button-processing displaying none but I can not get it to change in the parent window. I have tried placing jQuery('.twitter-button-processing').hide(); in a jQuery(window).unload() function after the close but this did not produce the correct result.
I tried the solutions from Binding jQuery event on a child window and How to run function of parent window when child window closes? to no avail. Any help would be fantastic.
So I ended up pinpointing the answer on my own. Instead of redirecting back to the same page which was getting messy, I am redirecting to a blank page from the twitter popup window with some classic ASP that checks a few session variables.
Main File
var someFunction = function(data){
//some functionality
}
Twitter Popup Redirect window in the asp checks
window.opener.someFunction();
window.close();
This did exactly what I needed to do by calling the JS on the parent window while closing the child. Maybe this will help someone else.
Right now I have a jQuery UI dialog with an <iframe> inside of the dialog. When the user pushes a button, the dialog pops up with a form-editing screen in the iframe.
Well, I want to have two buttons in the inner form-editing screen, "cancel" and "ok". Cancel doesn't save changes and closes the dialog, ok saves changes and closes the dialog. Pretty simple..
So how do I attach an event to the cancel button inside of the iframe from the parent page? I would also assume that you would somehow need to attach an event to the iframe's DOM-ready or else the button would not yet exist.
How do you do this?
Also, the iframe is on the same-domain and such so there is no cross-domain worries
A simple example is here at jsbin with the iframe source
Ok so here is what I did to accomplish this. I added this code to the iframe page:
$(document).ready(
function()
{
$("#cancelbutton").click(
function()
{
parent.CloseDialog();
});
});
Then in the opening page I put this:
function CloseDialog()
{
$('#diag').dialog('close');
}
So rather than try to close the dialog from the frame I just call a method in the parent page that will take care of closing it. Same effect but a lot easier. Couldn't seem to get the frame to let me use the dialog method. But this worked.
Does this get you close?
DialogBox.html:
<body>
<input type="submit" value="Edit" id="editbutton" />
<div id="diag">
<iframe src="/" ></iframe>
</div>
<script>
$(document).ready(function(){
$('#diag').dialog({
height: 100,
width: 100,
autoOpen: false
});
$('#editbutton').click(function(){
$('#diag iframe').attr('src','modal.html');
$('#diag').dialog('open');
});
$("#diag iframe").load(function() {
$("#diag iframe").contents().find('#cancelbutton').click(function() {
//close dialog here
});
});
});
</script>
</body>
onclick="parent.window.close();"