I am trying to open a simple link in a new tab. I have tried searching on google, and stackoverflow but the result says, we need to change settings in browser. Is there a way to do the same using javascript?
Here is the sample script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function gotoNewtab(){
document.forms[0].target="_blank";
document.forms[0].method = "post";
document.forms[0].action = "http://www.google.com";
document.forms[0].submit();
}
</script>
</head>
<body>
<form name="frm">
<p> click the below link to open the page in new tab </p>
<p> <a href="##"
onclick="javaScript:return gotoNewtab();">
click here </a>
</p>
</form>
</body>
</html>
You don't need Javascript.
Just write
...
Write the following JavaScript code to open a new tab
window.open("http://www.targetdomain.com", '_blank');
If you want to use HTML to do it, write the following code:
Click here to open a new tab
The noopener noreferrer attribute is to make sure the new tab doesn't mess around maliciously with the tab that opened it.
This behaviour is up the the specific browser settings. If the IE settings are set to tab-usage, they may be used, unless you specify that the links should open in a new window.
Related
I need to be able to set, in javascript, all html page links to open in a new tab, how can I do that?
Can it be attributed to the div "links"?
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Negócios</title>
<script type="text/javascript">
</script>
</head>
<body>
<div id="links">
<p>MARINGÁ - NEGÓCIOS</p>
<p>MONTES CLAROS - NEGÓCIOS<br>
</p>
<p>Sucesso Empresarial</p>
</div>
</body>
</html>
I need to do that without using the target attribute in the HTML. I have too many links, also, I want to learn how to do that.
You can append the target to all of your links within the "links" div by doing this:
Javascript:
window.onload = function(){
var a = document.getElementById('links').getElementsByTagName('a');
for (var i=0; i<a.length; i++){
a[i].setAttribute('target', '_blank');
}
}
or jQuery:
$(document).ready(function(){
$('#links a').attr('target', '_blank');
});
You can achieve that without JS using base tag.
<base target="_blank">
By using the target property.
For example,
Sucesso Empresarial
See other options in here.
I want to do popup like gmail chat popup window as well as I want to do pop-in like the way gmail does.
once the pop-out is done particular div should be open in new window and once the pop-in done the particular div should be placed in the position where it was been already, so far I am able to do the pop up the window in new window with the following code, but I don't have the idea how to do pop-in
Please note: once the pop-out done particular div should be open in another window and the variables in the main window also should be accessible in the pop-out window.
work out in Jsfiddle
Pop out demo
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
//<![CDATA[
$(function(){
$('.popup').click(function (event) {
event.preventDefault();
window.open($(this).attr("href"), "popupWindow",
"width=600,height=600,scrollbars=yes");
});
});//]]>
</script>
</head>
<body>
google
</body>
</html>
UPDATE
I have found the option how to open the div in new window the code as follows, now I am able to pop out the window with contents in the div, now I need to know how can I access the variable value in the pop out window and how to attach back the pop out window into that original place
Jsfiddle demo
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
Popup demo
</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js">
</script>
</head>
<body>
<a href="#" class="popup">
google
</a>
<div id="toNewWindow">
Testing
<input type="button" onclick="test()" value="click">
</div>
<script type="text/javascript">
//<![CDATA[
$('.popup').click(function (event) {
event.preventDefault();
var w = window.open("","myWin","height=400px,width=600px");
w.document.write( $("#toNewWindow").html() );
$('#toNewWindow').detach();
});
var a=3;
function test()
{
alert(a);
}
//]]>
</script>
</body>
</html>
Second edit
Now I have found the way to access the variables in between opener and child, code as follows
Now my problem is
if I have typed in the text box in child.html which is inside the iframe is not showing when on the popout.
Opener
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Popup checking</title>
<script type="text/javascript">
var winObj;
function openwindow()
{
winObj=window.open("","_blank","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
var s=document.getElementById('page').innerHTML;
console.log(s);
//var s=document.getElementById('page');
winObj.document.write(s);
//win.parent.detach(win);
}
function changeValue()
{
console.log(winObj.document.getElementById('changer').value);
winObj.document.getElementById('changer').value='changer';
}
</script>
</head>
<body>
<div id="page">
<iframe src="child.html" width="100" height="100"></iframe>
</div>
<div id="page1">
<input type="text" id="text1"/>
<input type="button" value="popup" onclick="openwindow()"/>
<input type="button" value="changevalue" onclick="changeValue()"/>
</div>
</body>
</html>
Child
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function openerChange()
{
window.opener.document.getElementById('text1').value="Value changed.."
}
</script>
</head>
<body>
<input type="text" value="" id="changer" />
<input type="button" value="changed" onclick="openerChange()"/>
</body>
</html>
I would create a Named Window on the page your window expands from called eg. "HomeWindow".
Then expand window using similar to what you have, except rather using _blank give it a specific name like "ExpandedWindow"
eg.
window.open("http://YourLink.TLD","ExpandedWindow","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
then in the pop up to Retract window use these in a click function.
window.open(document.URL,"HomeWindow");
ExpandedWindow.close();
If I understand the question correctly, you want state preserved when you popout the window. It looks like you are populating the popout HTML from the #page node, which contains an iFrame.
First of all, know that when using an iFrame, any reparenting of the iframe node will cause a reload, losing all state. It's unfortunate ;(
If I were you, I would make it so that all event handling and state management is done in the main window. You're somewhat on the right track. When you open up the popout, if the main window is holding the state you can write that state to the opened window's iframe. Likewise when you close the popout and the iframe mounts back in the main window, you can initialize it with the correct values because the main window is keeping track of the state.
The details of how to do so...I'll leave as an exercise to the reader.
I am having a form in which i have applied the javascript validations, but if the user has javascript disabled then those validations does not work, please help me that how can i stop the user from submitting form until & unless he enables the javascript.
Thanks
Use JavaScript to put the submit button there.
<script type="text/javascript">
document.write("<input type=\"submit\" value=\"Submit Form\" />");
</script>
<noscript>
<p style="color: red;"><b><i>Please enable JavaScript to continue</i></b><p>
</noscript>
You could add the disabled="disabled" attribute on your submit button. Then using javascript when the DOM is loaded remove this attribute.
you cannt, on the client side. But you can still do validation on the server side. Essentially, server-side validation is what really matters.
You can use javascript validation, but note that javascript is just for adding more usability (i.e use it to make form submission easier for the client). Without javascript a form should still be submittable, partially for the small user-base which doesn't have javascript enabled by default.
partially because of a very small user base who otherwise will pwn you in the face for only using client side javascript validation and can (and probably will try at some point) to bypass this. So this is why server validation is a must, not only for the small user base without javascript.
Then ofcourse to answer your question, for the small user-base who wont try to manipulate your database or server you could remove your <form> and use:
<noscript>
You can FORM_BEHAVIOUR me with javascript enabled.
</noscript>
<script>
create a form here with javascript
</script>
How exactly you want to render your form is then ofcourse up to you, but note that no javascript can stop the very-small user base from abusing it.
javascriptdemo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JAVASCRIPTDEMO</title>
<script language="javascript" type="text/javascript">
function onset()
{
document.forms["jdemoform"].elements["uname"].focus();
}
function jdemo()
{
if(document.forms["jdemoform"].elements["uname"].value=="")
{
alert("fill your name");
document.forms["jdemoform"].elements["uname"].focus();
return false;
}
document.forms["jdemoform"].submit();
}
</script>
</head>
<body onload="onset();">
if javascript disabled then form will not be submitted
<form name="jdemoform" method="post" action="getname.php">
Name:<input type="text" name="uname" />
<input type="button" value="Submit" onClick="return jdemo();"/>
</body>
</html>
getname.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JAVASCRIPTDEMO</title>
</head>
<?php
echo $_POST["uname"];
?>
<body>
</body>
</html>
I have an XHTML 1.0 Strict document in which I'm trying to make Shadowbox work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="Content-Type" content="text/html; charset=UTF-8" />
<title>Test page</title>
<link rel="stylesheet" type="text/css" href="shadowbox.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
console.log('Howdy there!'); // displays, so no JS error in Shadowbox.init
</script>
</head>
<body>
<p>
<a href="image.jpg" title="Howdy" rel="shadowbox">
<img src="image.jpg" alt="Click to zoom." />
</a>
</p>
</body>
</html>
This document is completely valid according to my Firefox extension.
For some reason Shadowbox seems to do nothing. When I click the image link, the browser just opens the image as usual. No box at all.
I've tried not loading JQuery and only load Shadowbox but that didn't help, so it's not JQuery's fault either. This is with Shadowbox 3.0b by the way. Any ideas?
EDIT: I just got thinking... Shadowbox does some internal magic to figure out the path to it. However, this page is completely static and loaded directly from file on disk. Could this be the problem? Looking in the DOM, I see that Shadowbox.path is correctly set to "file:///C:/..." so maybe not?
You need to have (nebo have to have) all directories from showbox.zip in the directory with the file showbox.js, because showbox adds other scripts to the page.
I'm attempting to use document.location(.href) on the onLoad event to redirect from one page (A) to another (B).
From my understanding, if I use document.location.href (as opposed to .replace), it should add (A) to my history. However, this doesn't appear to be happening.
I've tried setting document.location, document.location.href, and using .assign, and none of these seem to add the first page to the history. Is there any JS technique that can be done via onLoad that will cause (A) to be in the history?
Cheers,
Victor
'location.href', 'document.location' or any of these variations will only add an entry to the browser history if it came from a user initiated action.
For example, if user clicks a button that fires a function that performs a 'location.href' it will be added to browser history, but if 'location.href' is called by an onload event - which is not a user initiated action, it will not be added to the history.
If you modify document.location.href, it will definitely add to the history.
Try this demo page →
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
</style>
<script>
$(document).ready(
function()
{
$('#hello').click( function(ev) { ev.preventDefault(); document.location.href='http://www.google.com';});
}
);
</script>
</head>
<body>
<p>Hello from JS Bin</p>
<a id="hello" href="#">Click Me</a>
</body>
</html>
Can you create a sample page where it shows that browser history is not changed?
Try:
location.replace('www.google.com');
This should put the page in your history.