Kuinka luoda HTML-palautuspainike

Kuinka luoda HTML-palautuspainike

Voit lisätä web-sivullesi Takaisin-painikkeen. Kun sivusi vierailija napsauttaa painiketta, hän siirtyy viimeksi vierailemansa sivulle, aivan kuin hän olisi napsauttanut selaimensa Takaisin-painiketta.

Voit saavuttaa tämän muokkaamalla sivusi HTML-koodia ja lisäämällä hieman JavaScriptiä.

Huomautus

Nämä painikkeet eivät toimi, jos käyttäjällä ei ole selaushistoriaa. Jos käyttäjä esimerkiksi avaa sivusi uudessa selaimen välilehdessä tai ikkunassa, mitään ei tapahdu, kun hän napsauttaa painiketta.

Käytä historia.takaisin

Verkkoselaimessa sisäänrakennetussa JavaScript-objektiikkunassa on historia-niminen objekti, joka sisältää URL-osoitteet, joissa käyttäjä on käynyt nykyisessä selainikkunassaan. Historia.back()-menetelmällä voit käskeä selaimen palaamaan käyttäjän edelliselle sivulle.

Yksi tapa käyttää tätä JavaScriptiä on lisätä se painikkeen onclick-tapahtumamääritteeseen. Tässä luomme painikkeen käyttämällä

-elementtiä, joka sisältää painiketyyppisen -elementin.

Lisää seuraava HTML-koodi verkkosivullesi:

<form>
 <input type="button" value="Go back!" onclick="history.back()">
</form>

Tulos näyttää alla olevalta painikkeelta. Jos napsautat sitä, palaat historiasi edelliselle sivulle.

Käytä historia.goa

History.go()-menetelmä kertoo selaimen siirtyvän tietylle sivulle käyttäjän selaushistoriassa. Voit määrittää, minkä historian kohteen lisäämällä numeron sulkeisiin. Tietokoneohjelmoinnissa tätä kutsutaan argumentiksi.

Jos määrität argumentiksi luvun -1, selain palaa yhden sivun taaksepäin selaimen historiassa. Tässä on sama koodi kuin yllä, käyttäen historia.go(-1) historia.back() sijaan.

<form>
 <input type="button" value="No, really, go back!" onclick="history.go(-1)">
</form>

Recent Articles

spot_img

Related Stories

Stay on op - Ge the daily news in your inbox

[tdn_block_newsletter_subscribe input_placeholder="Email address" btn_text="Subscribe" tds_newsletter2-image="730" tds_newsletter2-image_bg_color="#c3ecff" tds_newsletter3-input_bar_display="" tds_newsletter4-image="731" tds_newsletter4-image_bg_color="#fffbcf" tds_newsletter4-btn_bg_color="#f3b700" tds_newsletter4-check_accent="#f3b700" tds_newsletter5-tdicon="tdc-font-fa tdc-font-fa-envelope-o" tds_newsletter5-btn_bg_color="#000000" tds_newsletter5-btn_bg_color_hover="#4db2ec" tds_newsletter5-check_accent="#000000" tds_newsletter6-input_bar_display="row" tds_newsletter6-btn_bg_color="#da1414" tds_newsletter6-check_accent="#da1414" tds_newsletter7-image="732" tds_newsletter7-btn_bg_color="#1c69ad" tds_newsletter7-check_accent="#1c69ad" tds_newsletter7-f_title_font_size="20" tds_newsletter7-f_title_font_line_height="28px" tds_newsletter8-input_bar_display="row" tds_newsletter8-btn_bg_color="#00649e" tds_newsletter8-btn_bg_color_hover="#21709e" tds_newsletter8-check_accent="#00649e" embedded_form_code="YWN0aW9uJTNEJTIybGlzdC1tYW5hZ2UuY29tJTJGc3Vic2NyaWJlJTIy" tds_newsletter="tds_newsletter1" tds_newsletter3-all_border_width="2" tds_newsletter3-all_border_color="#e6e6e6" tdc_css="eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjAiLCJib3JkZXItY29sb3IiOiIjZTZlNmU2IiwiZGlzcGxheSI6IiJ9fQ==" tds_newsletter1-btn_bg_color="#0d42a2" tds_newsletter1-f_btn_font_family="406" tds_newsletter1-f_btn_font_transform="uppercase" tds_newsletter1-f_btn_font_weight="800" tds_newsletter1-f_btn_font_spacing="1" tds_newsletter1-f_input_font_line_height="eyJhbGwiOiIzIiwicG9ydHJhaXQiOiIyLjYiLCJsYW5kc2NhcGUiOiIyLjgifQ==" tds_newsletter1-f_input_font_family="406" tds_newsletter1-f_input_font_size="eyJhbGwiOiIxMyIsImxhbmRzY2FwZSI6IjEyIiwicG9ydHJhaXQiOiIxMSIsInBob25lIjoiMTMifQ==" tds_newsletter1-input_bg_color="#fcfcfc" tds_newsletter1-input_border_size="0" tds_newsletter1-f_btn_font_size="eyJsYW5kc2NhcGUiOiIxMiIsInBvcnRyYWl0IjoiMTEiLCJhbGwiOiIxMyJ9" content_align_horizontal="content-horiz-center"]