หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

googleแปลภาษา

googleTranslate เป็น "ไลบรารี" ของ JavaScript ซึ่งใช้กับ Google Cloud Translation API (v3beta1) เพื่อแปลหน้าเว็บ มีจุดมุ่งหมายเพื่อให้การทดแทน/ทางเลือกสำหรับ Google แปลภาษาสำหรับเว็บไซต์ที่เลิกใช้แล้วในขณะนี้: https://translate.google.com/intl/en/about/website

googleTranslate ไม่รองรับการตรวจสอบสิทธิ์ API คุณจะต้องระบุ URL พร็อกซีให้กับ googleTranslate โดยเป็นส่วนหนึ่งของการกำหนดค่า เช่น apiProxy URL นี้ควรส่งต่อเพย์โหลด POST ขาเข้าจาก googleTranslate พร้อมกับส่วนหัว OAuth 2.0 ที่ถูกต้องและพารามิเตอร์คีย์ API หาก Google Cloud Translation API กำหนดไว้

ตัวอย่างของเพย์โหลด POST ที่ส่งโดย googleTranslate ไปยังตำแหน่งข้อมูล proxyApi : 

{
    "sourceLanguageCode" : " en " ,
    "targetLanguageCode" : " fr " ,
    "mimeType" : " text/plain " ,
    "contents" :[
        " Hello " ,
        " World "
    ]
}

การตอบสนองที่คาดหวังจาก proxyApi : 

{
  "translations" : [
    {
      "translatedText" : " Bonjour "
    },
    {
      "translatedText" : " Monde "
    }
  ]
}

การใช้งาน

  1. ใส่สคริปต์ด้วย

รวม googleTranslate บนเว็บไซต์ของคุณ (ควรอยู่ในส่วน <HEAD> ) โดยใช้แท็กสคริปต์: 

 < script type =" text/javascript " src =" ./path/googleTranslate.js " > </ script >
  1. เริ่มต้น googleTranslate

เรียกเมธอด init และส่งการกำหนดค่าที่ต้องการ: 

 googleTranslate . init ( {
    apiProxy : "URL_to_authenticated_API_endpoint" ,
    sourceLanguage : "en" ,
} ) ;
  1. แปล

หากต้องการเปลี่ยนภาษา ให้เรียกใช้เมธอด googleTranslate.setTargetLanguage พร้อมรหัสภาษาเป้าหมาย เช่นภาษาฝรั่งเศส: 

 googleTranslate . setTargetLanguage ( 'fr' ) ;

เมธอด googleTranslate.setTargetLanguage ส่งคืนสัญญาซึ่งสามารถใช้เพื่อตรวจสอบความสมบูรณ์ของการดำเนินการแปลหน้าเว็บ สิ่งนี้มีประโยชน์หากคุณต้องการแสดงหน้าจอการโหลดหรือกราฟิก เนื่องจาก googleTranslate อาจใช้เวลาไม่กี่วินาทีในการดำเนินการแปลให้เสร็จสิ้น

การตั้งค่าการแปลกลับเป็นภาษาต้นฉบับหลังจากการแปลจะทำให้มีการโหลดหน้าซ้ำ

การตั้งค่าภาษาที่มีอยู่

การตั้งค่าภาษาจะถูกจัดเก็บไว้ใน localStorage ด้วยคีย์ของ gTranslate_lang สิ่งนี้มีประโยชน์ในการทำให้การตั้งค่าของผู้ใช้คงอยู่ในขณะที่พวกเขานำทางจากหน้าหนึ่งไปอีกหน้าหนึ่งในเว็บไซต์ของคุณ หากต้องการดึงข้อมูลการตั้งค่าภาษา เพียงเรียกใช้: 

 var langPreference = localStorage . getItem ( 'gTranslate_lang' ) ;

การจัดการการเปลี่ยนแปลงภาษา

ตัวอย่างต่อไปนี้แสดงวิธีที่ผู้ใช้สามารถเปลี่ยนภาษาตามฟิลด์ <select> :

HTML 

 < select id =" select-lang " >
    < option value =" en " > English </ option >
    < option value =" fr " > French </ option >
    < option value =" ru " > Russian </ option >
</ select >

จาวาสคริปต์ 

 //get <select id="select-lang"> element
var langSelectField = document . getElementById ( 'select-lang' ) ;

//get language preference and set it as default value for language `<select>` field
langSelectField . value = localStorage . getItem ( 'gTranslate_lang' ) ;

//listen for `<select>` change event
langSelectField . addEventListener ( 'change' , function ( e ) {

    //translate page
    var translatePromise = googleTranslate . setTargetLanguage ( e . target . value ) ;
    console . log ( "translating..." ) ;

    //promise returns a boolean
    //indicating success/failure of translation
    translatePromise . then ( function ( response ) {

      if ( response ) {
          console . log ( 'translation completed' )
      } else {
          console . log ( 'translation failed' ) ;
      }

    } ) ;
} ) ;

ตัวอย่าง JavaScript ที่สมบูรณ์ยิ่งขึ้น

รวมไว้ในมาร์กอัปของคุณ (ก่อนสคริปต์ googleTranslate) 

 < script >
    window . googleTranslateApiProxy = "https://authenticated_api_endpoint" ;
</ script >

Javascript ในไฟล์สคริปต์หลักของคุณ (หลังสคริปต์ googleTranslate) 

 window . addEventListener ( "load" , event => {
    
    //append translation in progress popup to body
    document . body . innerHTML +=
        '<div id="google_translate_popup">Translating...</div>' ;

    if ( document . getElementById ( "select-lang" ) !== null ) {
        //init google translate library
        var gtranslateInit = googleTranslate . init ( {
            apiProxy : window . googleTranslateApiProxy ,
            excludeElements : [ document . getElementById ( "select-lang" ) ] ,
            sourceLanguage : "en"
        } ) ;

        //when translation completes
        gtranslateInit . then ( function ( response ) {
            document . getElementById ( "google_translate_popup" ) . style . display =
                "none" ;
            if ( ! response ) {
                alert (
                    "There was a problem with translating this page. Please refresh the page and try again. If the problem persists, please contact the website administrator."
                ) ;
            }
        } ) ;

        var langSelectField = document . getElementById ( "select-lang" ) ;

        //check language preference in localStorage
        if (
            localStorage . getItem ( "gTranslate_lang" ) !== null &&
            localStorage . getItem ( "gTranslate_lang" ) !== ""
        ) {
            langSelectField . value = localStorage . getItem ( "gTranslate_lang" ) ;
        }

        //on language preference change
        langSelectField . addEventListener ( "change" , function ( e ) {
            if ( e . target . value !== "" && e . target . value !== "Select language" ) {
                var translatePromise = googleTranslate . setTargetLanguage (
                    e . target . value
                ) ;
                document . getElementById (
                    "google_translate_popup"
                ) . style . display = "block" ;
                translatePromise . then ( function ( response ) {
                    document . getElementById (
                        "google_translate_popup"
                    ) . style . display = "none" ;

                    if ( ! response ) {
                        alert (
                            "There was a problem with translating this page. Please refresh the page and try again. If the problem persists, please contact the website administrator."
                        ) ;
                    }
                } ) ;
            }
        } ) ;
    }
} ) ;

CSS เพื่อจัดสไตล์ป๊อปอัป 'กำลังแปล...' 

 # google_translate_popup {
    position : fixed;
    z-index : 999 ;
    background : white;
    top : 0 ;
    right : 50 % ;
    padding : 1 rem ;
    border : 1 px solid # fafafa ;
    display : none;
}

ตัวเลือกการกำหนดค่า

พารามิเตอร์ พิมพ์ ค่าเริ่มต้น คำอธิบาย ตัวอย่าง
apiProxy เชือก empty URL ปลายทางที่ผ่านการรับรองความถูกต้อง required : URL นี้ควรส่งต่อเพย์โหลด POST ขาเข้าจาก googleTranslate พร้อมกับส่วนหัว OAuth 2.0 ที่ถูกต้องและพารามิเตอร์คีย์ API หากตั้งค่าให้จำเป็นโดย Google Cloud Translation API https://www.domain.com/google-translate-api
translationNode วัตถุ document.body องค์ประกอบ HTML ที่ต้องแปล document.getElementById("#banner")
observeMutationsOn อาร์เรย์วัตถุ [] อาร์เรย์ขององค์ประกอบ HTML ที่ควรแปลหากมีการเปลี่ยนแปลง [document.getElementById("#banner"), document.getElementById("#main-content") ]
excludeElements อาร์เรย์วัตถุ [] อาร์เรย์ขององค์ประกอบที่ไม่ควรแปล [document.getElementById("#user-profile"), document.getElementById("#hidden-element") ]
sourceLanguage เชือก empty optional but recommended รหัสภาษา BCP-47 ของข้อความที่ป้อน หากทราบ เช่น "en-US" หรือ "sr-Latn" รหัสภาษาที่รองรับแสดงอยู่ในการสนับสนุนภาษาของ Google Cloud Translate หากไม่ได้ระบุภาษาต้นฉบับ API จะพยายามระบุภาษาต้นฉบับโดยอัตโนมัติและส่งคืนภาษาต้นฉบับภายในการตอบกลับ en
targetLanguage เชือก empty required รหัสภาษา BCP-47 เพื่อใช้แปลข้อความที่ป้อน โดยตั้งค่าเป็นรหัสภาษาใดรหัสหนึ่งที่แสดงอยู่ในการสนับสนุนภาษาของ Google Cloud Translate fr

ช่องเลือกการแปล

ด้านล่างนี้เป็นตัวอย่างของช่องที่เลือกซึ่งมีภาษาที่รองรับทั้งหมดพร้อมรหัส (ณ วันที่ 8 ต.ค. 2019): 

 < select name =" translate " id =" select-lang " >
    < option selected =" selected " > Select language </ option >
    < option value =" af " > Afrikaans </ option >
    < option value =" sq " > Albanian </ option >
    < option value =" am " > Amharic </ option >
    < option value =" ar " > Arabic </ option >
    < option value =" hy " > Armenian </ option >
    < option value =" az " > Azerbaijani </ option >
    < option value =" eu " > Basque </ option >
    < option value =" be " > Belarusian </ option >
    < option value =" bn " > Bengali </ option >
    < option value =" bs " > Bosnian </ option >
    < option value =" bg " > Bulgarian </ option >
    < option value =" ca " > Catalan </ option >
    < option value =" ceb " > Cebuano </ option >
    < option value =" zh-CN " > Chinese (Simplified) </ option >
    < option value =" zh-TW " > Chinese (Traditional) </ option >
    < option value =" co " > Corsican </ option >
    < option value =" hr " > Croatian </ option >
    < option value =" cs " > Czech </ option >
    < option value =" da " > Danish </ option >
    < option value =" nl " > Dutch </ option >
    < option value =" en " > English </ option >
    < option value =" eo " > Esperanto </ option >
    < option value =" et " > Estonian </ option >
    < option value =" fi " > Finnish </ option >
    < option value =" fr " > French </ option >
    < option value =" fy " > Frisian </ option >
    < option value =" gl " > Galician </ option >
    < option value =" ka " > Georgian </ option >
    < option value =" de " > German </ option >
    < option value =" el " > Greek </ option >
    < option value =" gu " > Gujarati </ option >
    < option value =" ht " > Haitian Creole </ option >
    < option value =" ha " > Hausa </ option >
    < option value =" haw " > Hawaiian </ option >
    < option value =" he " > Hebrew </ option >
    < option value =" hi " > Hindi </ option >
    < option value =" hmn " > Hmong </ option >
    < option value =" hu " > Hungarian </ option >
    < option value =" is " > Icelandic </ option >
    < option value =" ig " > Igbo </ option >
    < option value =" id " > Indonesian </ option >
    < option value =" ga " > Irish </ option >
    < option value =" it " > Italian </ option >
    < option value =" ja " > Japanese </ option >
    < option value =" jw " > Javanese </ option >
    < option value =" kn " > Kannada </ option >
    < option value =" kk " > Kazakh </ option >
    < option value =" km " > Khmer </ option >
    < option value =" ko " > Korean </ option >
    < option value =" ku " > Kurdish </ option >
    < option value =" ky " > Kyrgyz </ option >
    < option value =" lo " > Lao </ option >
    < option value =" la " > Latin </ option >
    < option value =" lv " > Latvian </ option >
    < option value =" lt " > Lithuanian </ option >
    < option value =" lb " > Luxembourgish </ option >
    < option value =" mk " > Macedonian </ option >
    < option value =" mg " > Malagasy </ option >
    < option value =" ms " > Malay </ option >
    < option value =" ml " > Malayalam </ option >
    < option value =" mt " > Maltese </ option >
    < option value =" mi " > Maori </ option >
    < option value =" mr " > Marathi </ option >
    < option value =" mn " > Mongolian </ option >
    < option value =" my " > Myanmar (Burmese) </ option >
    < option value =" ne " > Nepali </ option >
    < option value =" no " > Norwegian </ option >
    < option value =" ny " > Nyanja (Chichewa) </ option >
    < option value =" ps " > Pashto </ option >
    < option value =" fa " > Persian </ option >
    < option value =" pl " > Polish </ option >
    < option value =" pt " > Portuguese (Portugal, Brazil) </ option >
    < option value =" pa " > Punjabi </ option >
    < option value =" ro " > Romanian </ option >
    < option value =" ru " > Russian </ option >
    < option value =" sm " > Samoan </ option >
    < option value =" gd " > Scots Gaelic </ option >
    < option value =" sr " > Serbian </ option >
    < option value =" st " > Sesotho </ option >
    < option value =" sn " > Shona </ option >
    < option value =" sd " > Sindhi </ option >
    < option value =" si " > Sinhala (Sinhalese) </ option >
    < option value =" sk " > Slovak </ option >
    < option value =" sl " > Slovenian </ option >
    < option value =" so " > Somali </ option >
    < option value =" es " > Spanish </ option >
    < option value =" su " > Sundanese </ option >
    < option value =" sw " > Swahili </ option >
    < option value =" sv " > Swedish </ option >
    < option value =" tl " > Tagalog (Filipino) </ option >
    < option value =" tg " > Tajik </ option >
    < option value =" ta " > Tamil </ option >
    < option value =" te " > Telugu </ option >
    < option value =" th " > Thai </ option >
    < option value =" tr " > Turkish </ option >
    < option value =" uk " > Ukrainian </ option >
    < option value =" ur " > Urdu </ option >
    < option value =" uz " > Uzbek </ option >
    < option value =" vi " > Vietnamese </ option >
    < option value =" cy " > Welsh </ option >
    < option value =" xh " > Xhosa </ option >
    < option value =" yi " > Yiddish </ option >
    < option value =" yo " > Yoruba </ option >
    < option value =" zu " > Zulu </ option >
</ select
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด