{"id":21347,"date":"2020-08-17T23:10:31","date_gmt":"2020-08-18T06:10:31","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=21347"},"modified":"2020-12-29T13:42:08","modified_gmt":"2020-12-29T21:42:08","slug":"javascript-redirect","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-redirect\/","title":{"rendered":"How to Perform a JavaScript Redirect"},"content":{"rendered":"\n<p>There are several ways to redirect a web page: client side using the meta tag in HTML, and server side using HTTP redirect methods to name a few. In this article, we look at how to redirect a web page using JavaScript.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Two Methods<\/h2>\n\n\n\n<p>There are two possible ways to use JavaScript code for page redirection. Both involve the window location object.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">href<\/h3>\n\n\n\n<p>The first way involves the href property on the location object (which, in turn, is part of the window object). The only thing you have to do is handle the redirect by assigning the URL you would like for the redirect to go to as the location.href. You do this in a JavaScript function that will execute when the page loads:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n&lt;head&gt;\n &lt;style&gt;\n   body {\n     font-family: 'Roboto';\n     margin: 20px;\n   }\n   p {\n     margin: 0;\n     padding: 0;\n   }\n &lt;\/style&gt;\n \n&lt;\/head&gt;\n &lt;body onload=handleRedirect(&quot;https:\/\/www.careerkarma.com\/blog\/html&quot;)&gt;\n     You are being redirect to &lt;a rel=&quot;noreferrer noopener&quot; href=&quot;https:\/\/careerkarma.com\/blog\/html&quot;&gt;http:\/\/www.careerkarma.com\/blog\/html.&lt;\/a&gt; Please click this link if not redirected in five seconds\n &lt;\/body&gt;\n &lt;script&gt;\n   const handleRedirect = (url) =&gt; {\n     location.href = url;\n   }\n &lt;\/script&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>I\u2019ve added a script tag to the bottom of the document, right before the body tag. This is where our JavaScript goes. A function, called handleRedirect, has a parameter called url. We assign location.href to the value of that url.&nbsp;<br><\/p>\n\n\n\n<p>At the top of the body of the document, we have an onload event. This onload event executes the JavaScript function we assign to it. Here, we have passed in the URL we would like for it to go to. The redirect happens immediately and goes to the HTML portion of Career Karma\u2019s blog posts.&nbsp;<br><\/p>\n\n\n\n<p>If you would like to add a little bit of a pause before the page redirects, you can do that using the <code>setTimeout<\/code> function. Here\u2019s how to do it:&nbsp;<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>const handleRedirect = (url) =&gt; {\n     setTimeout(() =&gt; {\n       location.href = url;\n     }, 2000);\n   }<\/pre><\/div>\n\n\n\n<p>Everything else remains the same.&nbsp;<br><\/p>\n\n\n\n<p>This method adds the originating page to the history stack. It is accessible by the browser\u2019s back button. There is another method to replace the URL if you prefer to do that instead \u2013 we look at that one next!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">replace<\/h3>\n\n\n\n<p>Unlike the method we\u2019ve created above that assigns a new URL to a property on the location object, <code>location.replace()<\/code> is a method that assigns and replaces the original URL with the one you specify.&nbsp;<br><\/p>\n\n\n\n<p>This method does not place the original URL on the browser\u2019s stack, it replaces the destination with the redirected URL. Here\u2019s how to do it:&nbsp;<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n&lt;head&gt;\n &lt;style&gt;\n   body {\n     font-family: 'Roboto';\n     margin: 20px;\n   }\n   p {\n     margin: 0;\n     padding: 0;\n   }\n &lt;\/style&gt;\n \n&lt;\/head&gt;\n &lt;body onload=location.replace(&quot;https:\/\/www.careerkarma.com\/blog\/html&quot;)&gt;\n     You are being redirect to &lt;a rel=&quot;noreferrer noopener&quot; href=&quot;https:\/\/careerkarma.com\/blog\/html&quot;&gt;http:\/\/www.careerkarma.com\/blog\/html.&lt;\/a&gt; Please click this link if not redirected in five seconds\n &lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>As you can see, we don\u2019t need the script tag at all for this one-liner. When the document loads, it runs the location.replace method, which directs us to the site in parentheses.&nbsp;<br><\/p>\n\n\n\n<p>That\u2019s it! You can now redirect to a new web page using JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"There are several ways to redirect a web page: client side using the meta tag in HTML, and server side using HTTP redirect methods to name a few. In this article, we look at how to redirect a web page using JavaScript.&nbsp; Two Methods There are two possible ways to use JavaScript code for page&hellip;","protected":false},"author":77,"featured_media":21348,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-21347","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Perform a JavaScript Redirect | Career Karma<\/title>\n<meta name=\"description\" content=\"There are many ways to perform a redirect. Here we focus on how to manipulate the DOM to redirect a user to a new web page on Career Karma.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/javascript-redirect\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Perform a JavaScript Redirect\" \/>\n<meta property=\"og:description\" content=\"There are many ways to perform a redirect. Here we focus on how to manipulate the DOM to redirect a user to a new web page on Career Karma.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/javascript-redirect\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-18T06:10:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T21:42:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/pexels-luan-oosthuizen-1717728.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"660\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-redirect\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-redirect\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"How to Perform a JavaScript Redirect\",\"datePublished\":\"2020-08-18T06:10:31+00:00\",\"dateModified\":\"2020-12-29T21:42:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-redirect\\\/\"},\"wordCount\":422,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-redirect\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/pexels-luan-oosthuizen-1717728.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-redirect\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-redirect\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-redirect\\\/\",\"name\":\"How to Perform a JavaScript Redirect | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-redirect\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-redirect\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/pexels-luan-oosthuizen-1717728.jpg\",\"datePublished\":\"2020-08-18T06:10:31+00:00\",\"dateModified\":\"2020-12-29T21:42:08+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"There are many ways to perform a redirect. Here we focus on how to manipulate the DOM to redirect a user to a new web page on Career Karma.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-redirect\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-redirect\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-redirect\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/pexels-luan-oosthuizen-1717728.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/pexels-luan-oosthuizen-1717728.jpg\",\"width\":1020,\"height\":660,\"caption\":\"Yellow and black detour signage\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-redirect\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Perform a JavaScript Redirect\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\\\/\\\/www.linkedin.com\\\/in\\\/cmvnk\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/christina-kopecky\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Perform a JavaScript Redirect | Career Karma","description":"There are many ways to perform a redirect. Here we focus on how to manipulate the DOM to redirect a user to a new web page on Career Karma.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/javascript-redirect\/","og_locale":"en_US","og_type":"article","og_title":"How to Perform a JavaScript Redirect","og_description":"There are many ways to perform a redirect. Here we focus on how to manipulate the DOM to redirect a user to a new web page on Career Karma.","og_url":"https:\/\/careerkarma.com\/blog\/javascript-redirect\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-08-18T06:10:31+00:00","article_modified_time":"2020-12-29T21:42:08+00:00","og_image":[{"width":1020,"height":660,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/pexels-luan-oosthuizen-1717728.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/javascript-redirect\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-redirect\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"How to Perform a JavaScript Redirect","datePublished":"2020-08-18T06:10:31+00:00","dateModified":"2020-12-29T21:42:08+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-redirect\/"},"wordCount":422,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-redirect\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/pexels-luan-oosthuizen-1717728.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/javascript-redirect\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/javascript-redirect\/","url":"https:\/\/careerkarma.com\/blog\/javascript-redirect\/","name":"How to Perform a JavaScript Redirect | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-redirect\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-redirect\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/pexels-luan-oosthuizen-1717728.jpg","datePublished":"2020-08-18T06:10:31+00:00","dateModified":"2020-12-29T21:42:08+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"There are many ways to perform a redirect. Here we focus on how to manipulate the DOM to redirect a user to a new web page on Career Karma.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-redirect\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/javascript-redirect\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/javascript-redirect\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/pexels-luan-oosthuizen-1717728.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/08\/pexels-luan-oosthuizen-1717728.jpg","width":1020,"height":660,"caption":"Yellow and black detour signage"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/javascript-redirect\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"How to Perform a JavaScript Redirect"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/21347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=21347"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/21347\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/21348"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=21347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=21347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=21347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}