{"id":722,"date":"2018-10-15T08:57:02","date_gmt":"2018-10-15T08:57:02","guid":{"rendered":"http:\/\/blog.softreeconsulting.com\/?p=722"},"modified":"2018-10-15T08:57:02","modified_gmt":"2018-10-15T08:57:02","slug":"inject-custom-javascript-modern-pages-page-load","status":"publish","type":"post","link":"https:\/\/softreetechnology.com\/blog\/all\/inject-custom-javascript-modern-pages-page-load\/","title":{"rendered":"How to Inject your Custom JavaScript in Modern Pages on Page Load"},"content":{"rendered":"

This SPFx functionality helps to inject your custom JavaScript file in your modern site pages on page load.<\/p>\n

[code lang=”c”]
\nexport default class MySPFXApplicationCustomizer
\nextends BaseApplicationCustomizer&lt;IMySPFXApplicationCustomizerProperties&gt; {<\/p>\n

private _customJsUrl: string = “https:\/\/sharepointdomain.net\/scripts\/MyCustonScript.js”;<\/p>\n

@override
\npublic onInit(): Promise&lt;void&gt; {<\/p>\n

let scriptTag: HTMLScriptElement = document.createElement(“script”);
\nscriptTag.src = this._customJsUrl;
\nscriptTag.type = “text\/javascript”;
\ndocument.getElementsByTagName(“head”)[0].appendChild(scriptTag);<\/p>\n

return Promise.resolve&lt;void&gt;();
\n}
\n}
\n[\/code]<\/p>\n

This solution is brought to you by our SharePoint professionals.<\/strong><\/p>\n

Softree Consulting<\/strong><\/a>\u00a0employs SharePoint consultants; we are a technology services provider with the aim to help companies achieve exceptional performance through SharePoint. Our dedicated team of SharePoint consultants has the right bent of mind to understand and execute customer requirements.<\/p>\n

Be it SPFx or SharePoint add-in developments,\u00a0SharePoint 2019 developments<\/strong><\/a>, web part developments, migrating from SharePoint 2010\/2013 to SharePoint 2013\/2016\/Office 365, Office 365, SharePoint hosted apps development or something else in SharePoint, we strive to deliver the best<\/p>\n","protected":false},"excerpt":{"rendered":"

This SPFx functionality helps to inject your custom JavaScript file in your modern site pages on page load. [code lang=”c”] export default class MySPFXApplicationCustomizer extends BaseApplicationCustomizer&lt;IMySPFXApplicationCustomizerProperties&gt; { private _customJsUrl: string = “https:\/\/sharepointdomain.net\/scripts\/MyCustonScript.js”; @override public onInit(): Promise&lt;void&gt; { let scriptTag: HTMLScriptElement = document.createElement(“script”); scriptTag.src = this._customJsUrl; scriptTag.type = “text\/javascript”; document.getElementsByTagName(“head”)[0].appendChild(scriptTag); return Promise.resolve&lt;void&gt;(); } } [\/code] This solution is brought to you […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[129],"tags":[169,170,171],"class_list":["post-722","post","type-post","status-publish","format-standard","hentry","category-all","tag-modern-page-in-sharepoint-online","tag-sharepoint-modern-pages","tag-sharepoint-online-javascript-injection"],"yoast_head":"\nHow to Inject your Custom JavaScript in Modern Pages on Page Load - Softree Technology<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/softreetechnology.com\/blog\/all\/inject-custom-javascript-modern-pages-page-load\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Inject your Custom JavaScript in Modern Pages on Page Load - Softree Technology\" \/>\n<meta property=\"og:description\" content=\"This SPFx functionality helps to inject your custom JavaScript file in your modern site pages on page load. [code lang=”c”] export default class MySPFXApplicationCustomizer extends BaseApplicationCustomizer&lt;IMySPFXApplicationCustomizerProperties&gt; { private _customJsUrl: string = “https:\/\/sharepointdomain.net\/scripts\/MyCustonScript.js”; @override public onInit(): Promise&lt;void&gt; { let scriptTag: HTMLScriptElement = document.createElement(“script”); scriptTag.src = this._customJsUrl; scriptTag.type = “text\/javascript”; document.getElementsByTagName(“head”)[0].appendChild(scriptTag); return Promise.resolve&lt;void&gt;(); } } [\/code] This solution is brought to you […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/softreetechnology.com\/blog\/all\/inject-custom-javascript-modern-pages-page-load\/\" \/>\n<meta property=\"og:site_name\" content=\"Softree Technology\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-15T08:57:02+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Inject your Custom JavaScript in Modern Pages on Page Load - Softree Technology","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:\/\/softreetechnology.com\/blog\/all\/inject-custom-javascript-modern-pages-page-load\/","og_locale":"en_US","og_type":"article","og_title":"How to Inject your Custom JavaScript in Modern Pages on Page Load - Softree Technology","og_description":"This SPFx functionality helps to inject your custom JavaScript file in your modern site pages on page load. [code lang=”c”] export default class MySPFXApplicationCustomizer extends BaseApplicationCustomizer&lt;IMySPFXApplicationCustomizerProperties&gt; { private _customJsUrl: string = “https:\/\/sharepointdomain.net\/scripts\/MyCustonScript.js”; @override public onInit(): Promise&lt;void&gt; { let scriptTag: HTMLScriptElement = document.createElement(“script”); scriptTag.src = this._customJsUrl; scriptTag.type = “text\/javascript”; document.getElementsByTagName(“head”)[0].appendChild(scriptTag); return Promise.resolve&lt;void&gt;(); } } [\/code] This solution is brought to you […]","og_url":"https:\/\/softreetechnology.com\/blog\/all\/inject-custom-javascript-modern-pages-page-load\/","og_site_name":"Softree Technology","article_published_time":"2018-10-15T08:57:02+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/softreetechnology.com\/blog\/all\/inject-custom-javascript-modern-pages-page-load\/#article","isPartOf":{"@id":"https:\/\/softreetechnology.com\/blog\/all\/inject-custom-javascript-modern-pages-page-load\/"},"author":{"name":"admin","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/98740297642f06debccdcee2de84086b"},"headline":"How to Inject your Custom JavaScript in Modern Pages on Page Load","datePublished":"2018-10-15T08:57:02+00:00","mainEntityOfPage":{"@id":"https:\/\/softreetechnology.com\/blog\/all\/inject-custom-javascript-modern-pages-page-load\/"},"wordCount":174,"commentCount":0,"publisher":{"@id":"https:\/\/softreetechnology.com\/blog\/#organization"},"keywords":["modern page in sharepoint online","sharepoint modern pages","sharepoint online javascript injection"],"articleSection":["All"],"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/softreetechnology.com\/blog\/all\/inject-custom-javascript-modern-pages-page-load\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/softreetechnology.com\/blog\/all\/inject-custom-javascript-modern-pages-page-load\/","url":"https:\/\/softreetechnology.com\/blog\/all\/inject-custom-javascript-modern-pages-page-load\/","name":"How to Inject your Custom JavaScript in Modern Pages on Page Load - Softree Technology","isPartOf":{"@id":"https:\/\/softreetechnology.com\/blog\/#website"},"datePublished":"2018-10-15T08:57:02+00:00","breadcrumb":{"@id":"https:\/\/softreetechnology.com\/blog\/all\/inject-custom-javascript-modern-pages-page-load\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/softreetechnology.com\/blog\/all\/inject-custom-javascript-modern-pages-page-load\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/softreetechnology.com\/blog\/all\/inject-custom-javascript-modern-pages-page-load\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/softreetechnology.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Inject your Custom JavaScript in Modern Pages on Page Load"}]},{"@type":"WebSite","@id":"https:\/\/softreetechnology.com\/blog\/#website","url":"https:\/\/softreetechnology.com\/blog\/","name":"Softree Technology","description":"Celebrating 10+ Years in SharePoint Consulting !","publisher":{"@id":"https:\/\/softreetechnology.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/softreetechnology.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/softreetechnology.com\/blog\/#organization","name":"Softree Technology","url":"https:\/\/softreetechnology.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2023\/03\/cropped-white-logo-soft.png","contentUrl":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2023\/03\/cropped-white-logo-soft.png","width":844,"height":230,"caption":"Softree Technology"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/98740297642f06debccdcee2de84086b","name":"admin","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6fc78c8a7aa3fb0bf43c3b9a2e3962d7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6fc78c8a7aa3fb0bf43c3b9a2e3962d7?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/softreeconsulting.com"],"url":"https:\/\/softreetechnology.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts\/722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=722"}],"version-history":[{"count":0,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts\/722\/revisions"}],"wp:attachment":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}