Embeddable javascript code can be enhanced by incorporating references into the header

I have developed a basic calculator application using HTML, JavaScript, JQuery, and CSS. My intention is to allow others to embed this calculator app on their own web pages by utilizing a file named generate.js.

Within this file, there are several document.write() commands that output the HTML code for the calculator. However, I am encountering an issue with external resources hosted on my server such as images and libraries...

document.write("");
document.write("<link href=\"http:\/\/website.com\/config\/bootstrap.css\" media=\"screen\" rel=\"stylesheet\">");
document.write("<link href=\"http:\/\/website.com\/config\/bootstrap.min.css\" rel=\"stylesheet\"><!-- web fonts -->");
document.write("<link href=\"http:\/\/website.com\/config\/font-awesome.min.css\" rel=\"stylesheet\">");
document.write("<link href=\"http:\/\/website.com\/config\/style.css\" rel=\"stylesheet\" type=\"text\/css\">");
document.write("");

Although this code works, appending it to the body is not ideal practice...

This is new territory for me - is there a more effective or cleaner method to access the document headers and append these lines to them? Am I approaching this task incorrectly?

Furthermore, I wish to avoid using iframes for SEO reasons. Any guidance or recommendations would be greatly appreciated...

javascriptjqueryhtmlcss

Answer №1

By including this code snippet, a new link element is dynamically generated and appended to the head section of the HTML document in modern web browsers.

var customCss = document.createElement('link');

customCss.rel = 'stylesheet';
customCss.href = 'http://website.com/styles/custom.css/';

document.getElementsByTagName('head')[0].appendChild(customCss);

Answer №2

Here's a suggestion for you:

$('head').append('<link />');
$('head').append("");
$('head').append("<link href=\"http:\/\/website.com\/config\/bootstrap.css\" media=\"screen\"    rel=\"stylesheet\">");
$('head').append("<link href=\"http:\/\/website.com\/config\/bootstrap.min.css\" rel=\"stylesheet\"><!-- web fonts -->");
$('head').append("<link href=\"http:\/\/website.com\/config\/font-awesome.min.css\" rel=\"stylesheet\">");
$('head').append("<link href=\"http:\/\/website.com\/config\/style.css\" rel=\"stylesheet\" type=\"text\/css\">");
$('head').append("");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending a JavaScript Array to PHP results in receiving Undefined or Disallowed Key Characters

I've been grappling with this problem for a few days now. I have an array in JavaScript that I need to send over to my PHP method. This is my PHP code: public function saveCampaignSendToMediaOwner() { $result = $this->input->post(); e ...

javascriptphpjqueryajaxcodeigniter

Leverage the power of Angular's library dependency injection with the @inject

I am currently working on a project that involves a library. Within one of the classes in this library, I am attempting to provide a service using @optional, @host, and @inject decorators with an injection token. In the parent component, I have the optio ...

javascriptangulartypescriptdependency-injection

Is there a way to eliminate the auto-opening feature of WordPress Shortcode Ultimate Accordion on mobile devices with the help of jquery

Currently, I am utilizing the Accordion feature of Wordpress Shortcode Ultimate plugin. Although the plugin does offer an option to open the accordion on page load, I would like to have them closed by default on mobile devices. How can I achieve this usin ...

javascriptjquerywordpressjquery-mobile

Is it possible to apply styles to the body of a document using styled-components?

Is it possible to apply styles from styled-components to a parent element, such as the <body> tag, in a way that resembles the following: const PageWrapper = styled.div` body { font-size: 62.5%; } ` ...

javascriptreactjsstyled-components

Inquiry regarding the ng-disabled directive in AngularJS

<div ng-app="myApp" ng-controller="myCtrl"> <button type="submit" class="btn btn-primary pull-left" ng- disabled="captchaError">Submit</button> </div> <script> var app = angular.module('myApp', []); app.controller( ...

javascriptangularjs

Preventing undesired form submissions in HTML and JavaScript

My question might be simple, but it's what I have in mind. When working with two buttons in HTML - one for form submission and the other to trigger a JavaScript event - both buttons end up submitting the form. How can I make sure the second button onl ...

javascriptjqueryhtmlforms

Is there a way to disable default tooltips from appearing when hovering over SVG elements?

Looking for a way to display an interactive SVG image on an HTML page without default tooltips interfering. While I'm not well-versed in javascript/jQuery, I've managed to implement customized tooltips using PowerTip plugin. However, these custom ...

javascriptjquerysvgtooltip

Discovering the ways to retrieve Axios response within a SweetAlert2 confirmation dialog

I'm struggling to grasp promises completely even after reviewing https://gist.github.com/domenic/3889970. I am trying to retrieve the response from axios within a sweetalert confirmation dialog result. Here is my current code: axios .post("/post ...

javascriptlaravelvue.js

Several conditional statements in JSX

In my JSX Return() code, I am encountering an "If" issue when one of my conditions has 2 different 'onClick' events. There are 2 'a' tags, where one will display button 'X' if a statement is true and the other will display but ...

javascripthtmlreactjsif-statementjsx

Combining Flask with npm: A Comprehensive Guide

I have a unique flask application that initiates with python3 app.py running on localhost:5000 Moreover, there is another distinct nodejs program that kicks off with npm run start which operates on localhost:3000 The challenge that lies ahead for m ...

htmlwebflasknpmnpm-install

Should I use "npm install" or "sudo npm install -g"

When it comes to installing certain packages, sometimes running sudo npm install -g is necessary, while for others simply using npm install is enough. What causes this difference and why does it exist? Take the following examples: npm install -g grunt-c ...

javascriptnode.jsnpmsudo

Parsing of the module failed due to an unexpected character appearing when trying to insert a TTF file into the stylesheet

As a newcomer to Angular, I recently completed the tutorial and am now working on my first app. While trying to add an OTF file, everything went smoothly. However, when I made a change to my app.component.css file and included this code snippet: @font-fa ...

javascriptcssangulartruetype

Ways to align the `<ol>` number at the top vertically

I'm having trouble aligning my <ol> numbers vertically at the top of the list. I've created a sample on CodePen. ol { list-style-type: decimal-leading-zero; font-size: 11px; } a { font-size: 80px; tex ...

htmlcss

Having Trouble with Your CSS Styles?

After working with HTML and CSS for over 5 years, I find myself stumped by this particular issue. At the provided URL, there is a single div in that container with an ID of Clarity. The CSS rules I have implemented are as follows: #clarity { text-align: ...

htmlcss

Is it possible to display multiple qTips for the same target using jQuery qTip2?

I am currently utilizing the jquery qtip2 plugin to generate a mouseover tooltip. Here is the code snippet I am using: $(document).ready(function() { $("#optionalProdsImgPreview_1").qtip({ content: "<img src='http://mysite.com/myimg.jpg&ap ...

javascriptjquerytooltipqtip2

How do I rearrange the order of a collection in Firestore using a reference that I already have?

Is there a method to maintain a reference of the same collection while altering the ordering using firestore? TLDR: I am looking to achieve similar functionality as demonstrated in: , but since my data is sourced from firestore, I am struggling to find th ...

javascriptangularfirebasegoogle-cloud-firestoreangularfire2

HTML paired with AJAX response

Currently, I am tackling the situation described below: 1) I have an HTML page labeled A with an input of type text. 2) Upon selection, I trigger an Ajax call to another HTML page, B, in order to retrieve data from a MySQL database. 3) The retrieved dat ...

htmlajax

Using cookies in JavaScript for saving and fetching data

Currently, I am delving into the world of Javascript and attempting to work with cookies. Although my code appears to be correct, there seems to be an issue that I can't quite pinpoint. function init() { var panel = document.getElementById("panel ...

javascript

How can I efficiently iterate through the array of index IDs and then iterate individually through the communes, categories, and locations?

Currently, I am developing a nodejs typescript API where I am retrieving an array of objects using a map loop. The data for "communes", "category", and "location" is fetched from another API function based on the issuerId. However, I am facing issues with ...

javascriptnode.jsarraysjsontypescript

Encountering issues with the functionality of the MUI Select component, causing the application to crash during

The issue has been successfully resolved I have been in the process of constructing a modal that includes a form and incorporating the MUI Select component. However, upon opening the modal, the application encounters an error; removing the Select componen ...

javascriptreactjsmaterial-ui