JavaScript-ի ներարկում iOS WebViews-ում

WKWebView-ի քիչ հայտնի, բայց գերհզոր հատկանիշը

Հաճախակի թարմացվող բովանդակություն, օրինակ՝ ՀՏՀ-ն ցուցադրելու համար վեբ տեսք օգտագործելը շատ տարածված մարտավարություն է, որն օգտագործվում է iOS ծրագրավորողների մեծ մասի կողմից: Դրանով մշակողները կարող են հեշտությամբ թարմացնել վեբ դիտման բովանդակությունը՝ առանց App Store-ի վերանայման գործընթացի անցնելու: Մյուս կողմից, օգտատերերը կկարողանան դիտել առցանց բովանդակությունը՝ առանց հավելվածից դուրս գալու:

Որոշ շատ տարածված խնդիրներ, որոնք մենք կարող ենք ակնկալել նման մարտավարություններ օգտագործելիս, հետևյալն են՝ վեբ դիտման բովանդակության ոճավորումը չի համընկնում հավելվածի դիզայնի հետ, կամ բովանդակությունը ճիշտ չի չափվում շարժական սարքում:

Այս հոդվածում եկեք անդրադառնանք այս երկու խնդիրներին՝ օգտագործելով «JavaScript Injection» կոչվող տեխնիկան։ Ահա այն, ինչ դուք կսովորեք այս հոդվածում.

Հետաքրքի՞ր նայեք: Եկեք մտնենք դրա մեջ:

CSS-ի և JavaScript-ի պատրաստում ներարկման համար

Այս հոդվածի համար մենք կձևավորենք այս HTML-ը, որը ես պատրաստել եմ ավելի վաղ: HTML-ը ոճավորելու համար մենք նախ պետք է ստեղծենք CSS, որը սահմանում է մեր ուզած ոճը:

Ենթադրելով, որ դուք ունեք որոշ հիմնական CSS գիտելիքներ, վերը նշված կոդը բավականին ինքնաբացատրելի է: Այնուամենայնիվ, ես ուզում եմ ձեր ուշադրությունը հրավիրել font-family հատկության վրա: Ուշադրություն դարձրեք, թե ինչպես եմ այն ​​սահմանել որպես -apple-system, որպեսզի վեբ տեսքը կարտադրի HTML-ը՝ օգտագործելով iOS համակարգի տառատեսակը:

Pro հուշում.

Եթե ​​ձեր ոճավորումը պահանջում է երկար և բարդ CSS, խորհուրդ է տրվում կարդալ CSS-ը CSS ֆայլից:

Հիմա եկեք գրենք մի քանի JavaScript, որը բեռնում է մեր գրած CSS-ը:

Նկատի ունեցեք, որ CSS-ը JavaScript-ի հետ համատեղելուց առաջ կարևոր է դարձնել մեկ ներդիր, այլապես ներարկումը չի աշխատի:

JavaScript-ի ներարկում

Ահա թե որտեղ է տեղի ունենում կախարդանքը: Մենք կօգտագործենք WKUserScript դասը՝ JavaScript-ը մեր վեբ տեսքում ներարկելու համար:

Ինչպես տեսնում եք, մենք գործարկում ենք WKUserScript օրինակը՝ օգտագործելով մեր նոր ստեղծած JavaScript-ը և խնդրում ենք ներարկել JavaScript-ը HTML փաստաթղթի բեռնումն ավարտելուց հետո (օգտագործելով .atDocumentEnd): Սա շատ կարևոր է, քանի որ JavaScript-ը չի աշխատի, եթե ներարկումը տեղի ունենա մինչ այդ:

Օգտվողի սկրիպտը տեղում, մենք կարող ենք շարունակել բեռնել օգտվողի սկրիպտը վեբ տեսքում այսպես.

HTML բովանդակության մասշտաբավորում

Այժմ, եթե մենք առաջ գնանք և բեռնենք HTML-ը, որը ես պատրաստել եմ ավելի վաղ,

մենք կտեսնենք այսպիսի բան.

Պատճառն այն է, որ մեր HTML-ում բացակայում է <meta> թեգը: Հետևաբար, վեբ տեսքը գաղափար չունի, թե ինչպես ճիշտ չափել HTML-ը: Սրա լուծումը բավականին պարզ է, այն ամենը, ինչ մենք պետք է անենք, հետևյալ <meta> viewport տարրն է HTML-ում տեղադրել:

<meta name=\"viewport\" content=\"user-scalable=no, width=device-width\">

Հաշվի առնելով դա, մենք այժմ կարող ենք թարմացնել մեր օրինակելի կոդը այսպես.

վերջ Եթե ​​փորձեք գործարկել օրինակելի կոդը, դուք պետք է կարողանաք տեսնել HTML-ի գեղեցիկ մատուցումը վեբ դիտում:

Ազատորեն ստացեք ամբողջական օրինակելի կոդը այստեղ և փորձեք այն:

Փաթաթում

HTML-ի ոճավորումը JavaScript-ի ներարկման օգտագործման դեպքերից միայն մեկն է: Ինչ այլ օգտագործման դեպքեր կարող եք մտածել: Ազատորեն կիսվեք ինձ հետ ձեր մտքերով Twitter-ում, ես իսկապես կցանկանայի լսել ձեզանից:

Շնորհակալություն կարդալու համար: