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>
Related
<script type="text/javascript">
<!--
function FP_popUpMsg(msg) {//v1.0
alert(msg);
}
// -->
</script>
</head>
<body style="background-color: #800080" onload="FP_popUpMsg('test message')">
This popup window appears on load of the webpage. I want to format this so that the user cannot access the page unless they click the OK button in the popup. Presently they can click the X in the browser (top right) and still get in
You could always use confirm, which returns true if the 'ok' button was clicked and false if the close or cancel buttons were clicked. MDN has a page on it: https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm. The question at How to stop page load in html static page has some solutions for stopping a page from loading, though they seem hackish and bound to fail at some point. Another solution to that part of the problem would be to redirect to a dedicated page; see How to redirect to another webpage in JavaScript/jQuery? for more.
A sample solution (pure JS, no libraries used here)
<html>
<head>
<script type = "text/javascript">
function redirIfNotConfirmed(msg) {
var confirmed = confirm(msg);
if (!confirmed) window.location.href = "http://my.website.com/dummy_redir_page";
}
redirIfNotConfirmed("click ok to proceed");
</script>
</head>
So, I have a javascript for a popunder ad, (yeah I know they're annoying but it's not an ad, it's a page that opens behind the main page) anyway, because the script has the page open automatically when you go to my page, pop up blockers automatically block it, so what I would like to do is have the script run when someone clicks a link on my page, therefore it is user initiated and not automatically, so it doesn't get blocked by a popup blocker.. basically, so when someone clicks on one of the links on my page, it opens the link, but also opens the pop under behind my page.. I'm kind of new to javascript, but any help is appreciated!
This would be one approach:
HTML:
<a id="link">Link</a>
JavaScript:
function script() {
alert("I'm the ad");
};
document.getElementById('link').onclick = function () {
script();
};
For demonstration see this Fiddle.
/Edit: Sure, here is the JavaScript:
// copy and paste the script from the website
document.getElementById('open').onclick = function () {
load_pop_power();
};
If you don't want to show the ad when the user visits the site, you could however delete half of the code.
You could do something like this
function doSomething() {
//do your actions here
window.location="http://www.gotothelink.com";
}
</script>
click me
When the user clicks the link, the javascript code in the "onlick" attribute is executed. "window.open" opens a new window and "return true" has the effekt that the normal behaviour of the link keeps working.
tiscover
So you need to bind the popunder to a click event on a link
see http://www.pagecolumn.com/javascript/bind_event_in_js_object.htm
I'm having problems with history object and iframes in javascript/html5. I wrote a simple project to describe my problem:
http://dktest.evermight.com/
It's a page with an iframe and a next button. Every time you click next, it loads a new page with an incrementing counter. However, clicking the browser back button doesn't do what I want it to do. Let me explain the problem by breaking this post up into the following sections:
What I'd like to achieve
Undesired results in current project
Post all my code
1. What I'd like to achieve
I want the user to:
Open a new window and go to http://dktest.evermight.com/
Click next page and see a redbox fade in, and to see the url http://dktest.evermight.com/count.html?count=0 appear in both the iframe AND the browser's address bar
Click next page again and see http://dktest.evermight.com/count.html?count=1 in the iframe and browser's address bar
Click browser's back button ONCE and see http://dktest.evermight.com/count.html?count=0 in both the iframe and the browser's address bar
Click browser's back button ONCE and see http://dktest.evermight.com/ in the browser's address bar AND see the red box fade out
2. Undesired results in current project
With my code at http://dktest.evermight.com/, it's currently not performing steps 4 and steps 5 correctly. When I perform step 4, the iframe shows http://dktest.evermight.com/count.html?count=0 but the browser address bar shows http://dktest.evermight.com/count.html?count=1. I have to press the browser's back button again to make the browser address bar show http://dktest.evermight.com/count.html?count=0. When I perform step 5, the red box fades out which is great, but the address bar is still showing http://dktest.evermight.com/count.html?count=0. I have to press back again to make the address bar show http://dktest.evermight.com/.
3. Post all my code
My code is pretty straight forward. You can view source on http://dktest.evermight.com/. I will also post here for convenience.
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var count=0;
function clicknext()
{
$('#container').fadeIn();
$('#iframe').attr('src','count.html?count='+count.toString());
$('html title').html(count);
history.pushState({blahblah:'whatgoeshere?'},'i dont know what goes here either','http://dktest.evermight.com/count.html?count='+count);
count++;
}
function hideContainer()
{
$('#container').fadeOut();
var closeurl = 'close.html';
if($('#iframe').attr('src') != closeurl )
$('#iframe').attr('src', closeurl);
}
$(document).ready(function(){
hideContainer();
});
</script>
</head>
<body>
<div id="container" style="display:none; background:red;">
<!-- IMPORTANT
When DOM first created, the iframe.src MUST BE initialize.html
I have some code that I need to fire on that page before the rest
of this document starts
-->
<iframe id="iframe" src="initialize.html"></iframe>
</div>
<input type="button" onclick="clicknext()"; value="next page" />
</body>
</html>
close.html
<!DOCTYPE html>
<html>
<script type="text/javascript">
parent.hideContainer();
</script>
</html>
count.html
I CAN NOT modify the contents of count.html. In my real project, count.html is actually a youtube video, which is on a server I can't directly access.
<html>
<body>Youtube video at url <script type="text/javascript">document.write(location.href);</script></body>
</html>
initialize.html
Perform application specific functionality
Can anyone correct my code to achieve the results of step 4 and step 5 as described in section 1?
UPDATE
Ok, I'm appreciating the problem a bit more based on some experiments I'm doing.
Experiment 1: I tried changing the line:
$('#iframe').attr('src','count.html?count='+count.toString());
to
$('#iframe')[0].contentWindow.location.replace('count.html?count='+count.toString());
This allowed me to perform step 4 correctly. Apparently, contentWindow.location.replace() will not create an entry in the history object. However, this caused some other issues related with the contents of count.html, which is actually a page to youtube/vimeo content. The youtube/vimeo content REQUIRES that you load information via the attr('src') approach instead of .contentWindow.location.replace(). So perhaps the solution is to find a way to make attr('src') NOT create an entry with the history object?
Experiment 2 Another possible solution I tried was changing the order of the attr('src') and history.pushState() call. I tried calling attr('src') first then history.pushState() second, and also history.pushState() first then attr('src') second. But in both cases, when I push the browser's back button, it is the iframe content that goes back first. So there's no way for me to capture pass myself a message via the history object to do a "double back", since information in the history object is available LAST in the sequence of events.
Experiment 3 I also tried working with History.js. It did not do anything to solve my problems above. From what I could tell, it worked exactly like the regular history object.
Does anyone have any thing else I can try? Or suggest modifications to any of the experiments above? I'm going to explore Experiment 1 further as a separate stack overflow question.
I create a new iframe and destroy the iframe when loading new content. That solves the history issues.
I know this is a history problem but if you are still open to other possibilities, I think jquery-pjax is actually more suitable for what you are trying to do.
UPDATE I think this should work.
count.html
<div id="pjax-container">
<a id="pjax" data-pjax href="#">Next Page</a>
</div>
javascript
// get URL parameter (count): http://stackoverflow.com/questions/1403888/get-url-parameter-with-jquery
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
);
}
$(document).on('pjax:beforeSend', function() {
// your fading code goes here
})
$(document).on('pjax:complete', function() {
// fade out
// and then modify the anchor's href with something like
var new_count = getURLParameter('count') + 1;
$('a#pjax').attr('href', 'count.html?count=?' + new_count);
})
// where the pjaxed content should go
$(document).pjax('a[data-pjax]', '#pjax-container')
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.
Here's what I have:
A web application that runs in a single HTML page (call it myapp.req), with content coming and going via AJAX
The application can be entered externally with a link such as myapp.req?id=123, and the application opens a tab with the item at id 123
The content on the page is mostly user's content, and many times has inner-application links to myapp.req?id=123
The problem is that clicking a link to myapp.req?id=123 reloads the browser, and removes any content or state that the user had loaded
What I want is to be able to catch link clicks whose destination is myapp.req?id=123, and instead of reloading the page, just open the tab for item 123, leaving anything else currently loaded alone. If the link is for an external website, though, obviously just let the browser leave.
So my question really: Can I have a global link handler that checks if I want to handle the link click, and if so, run some Javascript and don't leave?
I understand I could find all <a>s and add listeners, but my hope is that the solution would only require setting up the listener once, and not adding link handlers every time new content is loaded on the page. Since content can be loaded many different ways, it would be cumbersome to add code to all those places.
Does that make sense?
jQuery's live is what you need:
$('a').live("click", function () {
var myID = $(this).attr('href').match(/id=([a-zA-Z0-9_-]*)\&?/)[1];
if (myID) {
//run code here
alert(myID);
return false;
}
});
Any link will now have this click handler whether it's been added after this is called or not.
Sure you can. Add a clickhandler on the body. So you catch all clicks. Then you have to check if the target of the event or one of its parent is a link with your specific href. In this case stop the event and open the tab.
updated to use .live instead of .click
If you use jQuery, you can add a "live" click event handler to every a href at once:
<body>
click here
<br/>
whatever
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$('a').live('click',function() {
var myID = $(this).attr('href').match(/id=([a-zA-Z0-9_-]*)\&?/)[1];
if (myID) {
//run code here
alert(myID);
return false;
}
});
</script>
This should extract the id from the href's query string and let you do whatever you want with it.