g-rohit/OpenInSameWindow.html

## open-a-page-in-same-window.markdown

      
    Raw
  

              open-a-page-in-same-window.markdown
            
          
    Open a page in same window

Click on a button to open any page in the same window
A Pen by G Rohit on CodePen.
License.

  
## OpenInSameWindow.html
<!DOCTYPE html>
<html lang="en">
<head>

  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>Open page in same window</title>


</head>
<body>
  <div class="content">


  <a href="https://docs.google.com/spreadsheets/d/1xPk6NkTYGNxydNzTXnfvpICOTlEVHZC_C3QDB3s2SL8/edit?usp=sharing"  id="confirmToFollow">Click here</a> to open the document

</div>
  <br><br>

<!--second method    -->

<form name="form1" id="form1" action="" onsubmit="openWindow(450, 450, 'https://docs.google.com/spreadsheets/d/1xPk6NkTYGNxydNzTXnfvpICOTlEVHZC_C3QDB3s2SL8/edit?usp=sharing');" class="content">
<input type="submit" value="click here to open in small window"/>
</form>

</body>
</html>

## script.js
// Method 1 to ask the user to confirm before it loads
var link = document.getElementById('confirmToFollow');

link.onclick = function () {
    if( confirm("Are you sure?") ) {
        window.location = "https://docs.google.com/spreadsheets/d/1xPk6NkTYGNxydNzTXnfvpICOTlEVHZC_C3QDB3s2SL8/edit?usp=sharing";
    }
    return false;
};

// second method to open in small window in same window
function openWindow(h, w, url) {
  leftOffset = (screen.width/2) - w/2;
  topOffset = (screen.height/2) - h/2;
  window.open(url, this.target, 'left=' + leftOffset + ',top=' + topOffset + ',width=' + w + ',height=' + h + ',resizable,scrollbars=yes');

}

## style.css
/**
 * index.css
 * - Add any styles you want here!
 */

body {
  background: #f5f5f5;
  font-family:monospace;
}

.content {
 text-align:center;
  margin-top: 10%;
    margin-bottom:20px;
}
a , input{
  padding: 10px;
  border:1px solid #000;
  text-decoration:none;
  color:#000;
  background:#fff018;
  border-radius:5px;
  cursor:pointer;

}

a:hover , input:hover{
   background:#fff000;
  font-weight:bold;
  -webkit-box-shadow: -4px 0px 42px 5px rgba(179,179,179,0.75);
-moz-box-shadow: -4px 0px 42px 5px rgba(179,179,179,0.75);
box-shadow: -4px 0px 42px 5px rgba(179,179,179,0.75);
}
	<!DOCTYPE html>
	<html lang="en">
	<head>

	<!-- Meta -->
	<meta charset="UTF-8" />
	<title>Open page in same window</title>


	</head>
	<body>
	<div class="content">


	<a href="https://docs.google.com/spreadsheets/d/1xPk6NkTYGNxydNzTXnfvpICOTlEVHZC_C3QDB3s2SL8/edit?usp=sharing" id="confirmToFollow">Click here</a> to open the document

	</div>
	<br><br>

	<!--second method -->

	<form name="form1" id="form1" action="" onsubmit="openWindow(450, 450, 'https://docs.google.com/spreadsheets/d/1xPk6NkTYGNxydNzTXnfvpICOTlEVHZC_C3QDB3s2SL8/edit?usp=sharing');" class="content">
	<input type="submit" value="click here to open in small window"/>
	</form>

	</body>
	</html>
	// Method 1 to ask the user to confirm before it loads
	var link = document.getElementById('confirmToFollow');

	link.onclick = function () {
	if( confirm("Are you sure?") ) {
	window.location = "https://docs.google.com/spreadsheets/d/1xPk6NkTYGNxydNzTXnfvpICOTlEVHZC_C3QDB3s2SL8/edit?usp=sharing";
	}
	return false;
	};

	// second method to open in small window in same window
	function openWindow(h, w, url) {
	leftOffset = (screen.width/2) - w/2;
	topOffset = (screen.height/2) - h/2;
	window.open(url, this.target, 'left=' + leftOffset + ',top=' + topOffset + ',width=' + w + ',height=' + h + ',resizable,scrollbars=yes');

	}
	/**
	* index.css
	* - Add any styles you want here!
	*/

	body {
	background: #f5f5f5;
	font-family:monospace;
	}

	.content {
	text-align:center;
	margin-top: 10%;
	margin-bottom:20px;
	}
	a , input{
	padding: 10px;
	border:1px solid #000;
	text-decoration:none;
	color:#000;
	background:#fff018;
	border-radius:5px;
	cursor:pointer;

	}

	a:hover , input:hover{
	background:#fff000;
	font-weight:bold;
	-webkit-box-shadow: -4px 0px 42px 5px rgba(179,179,179,0.75);
	-moz-box-shadow: -4px 0px 42px 5px rgba(179,179,179,0.75);
	box-shadow: -4px 0px 42px 5px rgba(179,179,179,0.75);
	}