safari not loading javascript file

404 Not found

How to enable Javascript in Safari on a Mac computer to prevent website errors

• To enable Javascript on a Mac while using Safari , you'll need to open Safari and navigate to its Security menu.
• Enabling Javascript can help you view web pages properly — without it, many websites and programs may not load.
• It should only take a minute or so to enable Javascript in Safari on your Mac .
• Visit Business Insider's homepage for more stories .

Javascript is an extremely common programming language that's used across the internet. 

And while it isn't necessarily required that you enable it in order to use Safari , it's something that you'll probably want to do. Otherwise, many websites you visit will look strange, or even broken.

Enabling Javascript in your Mac's default browser, Safari , is an easy process. In fact, it should only take you only a minute or so to complete.

Check out the products mentioned in this article:

Macbook pro (from $1,299.99 at best buy), how to enable javascript on a mac.

1. Open Safari (it's the compass icon that, by default, lives in your bottom toolbar).

2. In the top toolbar, select "Safari."

3. In the dropdown menu, click "Preferences."

4. Toggle over to the "Security" tab.

5. Check the box next to "Enable Javascript."

Once you've done that, you can close out the "Preferences" window, and you're good to go. 

If you use more than one browser, you may wish to enable it on those other browsers as well. On Chrome, for example, you'll still go through the "Preferences" menu at the top of the screen. Then type "Javascript" in the search bar and make sure that it says "Allowed" under "Javascript."

Related coverage from  How To Do Everything: Tech :

How to enable adobe flash player on a mac computer using safari, how to block pop-ups on a mac computer's safari browser, and avoid fraudulent websites, how to add websites to your favorites list on a mac's safari browser, making them easily accessible at any moment, how to save and delete webpages on the reading list in your mac computer's safari browser.

Insider Inc. receives a commission when you buy through our links.

Watch: Apple just launched a $6,000 Mac Pro, available this fall

• Main content

• PC & Mobile

How to Enable JavaScript in Google Chrome, Firefox, Microsoft Edge, and Safari

Lee Stanton Lee Stanton is a versatile writer with a concentration on the software landscape, covering both mobile and desktop applications as well as online technologies. Read more February 23, 2024

JavaScript is one of the most powerful dynamos behind the interactive web. This programming language lets web pages respond to your actions in real time. It’s why you can play videos, fill out forms, and engage in the myriad activities that make the World Wide Web so versatile and interactive.

If JavaScript is turned off in your browser, you’re not just missing out on flashy animations or convenient auto-fill forms; you’re opting out of the full, rich functionality modern web developers work so hard to create.

How to Enable JavaScript

Each web browser will be slightly different regarding how to enable JavaScript. However, there are many common threads that will be similar no matter which browser you use.

Google Chrome

If Google Chrome is your default browser , its important that you enable JavaScript on it for the best browsing experience. 

Mozilla Firefox

Enabling JavaScript support in Firefox is also easy. 

• The search for javascript.enabled .

Remember that incognito tabs in Firefox have JavaScript enabled by default.

Microsoft Edge

JavaScript is enabled by default in Microsoft Edge. You can still verify this by following the below steps.

While JavaScript can enhance a webpage, it can also be the cause of its unresponsiveness. 

Safari (macOS)

Enabling JavaScript in Safari on macOS requires jumping into its Preferences menu. 

Safari (iOS/iPadOS)

• Go to Settings on your iPhone or iPad and scroll down to Safari .

Opera’s JavaScript settings are tucked under Privacy & security section. 

Enable the True Internet

Enabling JavaScript is easy on every web browser and unlocks the web’s real potential. It’s a tiny change with a significant impact: enjoying the web’s full interactive features. So don’t keep it off, even if there are some security concerns. Just stay vigilant and use it in places you trust.

You might also want to learn how to block a website on Chrome for additional security.

Related Posts

Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.

Parth Shah February 29, 2024

Lee Stanton February 19, 2024

Send To Someone

Missing device.

Please enable JavaScript to submit this form.

Safari Mobile sometimes not loading script files when using a Self-Signed Certificate

I have found a bug in Mobile Safari on iOS 11 (details see below) which I have also reported via the Apple bug reporter (Problem ID 36238559). However, there has not been an answer so far in the bug reporter and we do need some response urgently because it is intended to roll out this software very soon. Most tests have been done using iOS 10 where this bug did not occur, so the problem was only found now when repeating tests on iOS 11.

Currently, the available infrastructure means that we have to support webservers with self-signed certificates. So, question is whether this is a known issue and there will maybe be a fix available in the near future or whether someone else knows a different workaround we could try.

I have found a bug in Mobile Safari in iOS 11 (but not iOS 10) that causes javascript applications to fail when they are loaded from a webserver using a self-signed certificate, are loaded soon after Safari was started and work by including other javascript files from the same host.

How to reproduce the bug

My setup uses an IIS (Microsoft Internet Information Services) which has SSL enabled and uses a self-signed certificate create from within IIS. There is a directory with the content of this ZIP archive .

There is basically one simple html page that looks like this:

And all the referrenced JavaScript files exist all with the same content:

What we expect to happen when opening the html page with a browser is that we see 19 lines with an X, a row saying “Hello World!” and then the number 19. When this specific bug occurs, we do see fewer lines with an X and a lower number at the end, because some of the included javascript files are not loaded.

How to see the bug in Safari

Open the web page in Safari (on iOS 11) by entering the correct url like in my case on the test server in my local network “https:/ to allow opening this site that does not have a trusted certificate. Confirm that.

When the page was opened and correctly shows the expected result, close Safari by showing the list of running apps on the iOS device and swipe away the Safari app. Then open Safari again. Safari will automatically try to open the same page again. In most cases when doing this, the bug will occur and you will see fewer than expected lines with X and lower number than 19 at the end.

Waiting some time and refreshing the page will then always produce the correct result until you restart Safari again.

This video shows the described behaviour on an iPad: https://www.youtube.com/watch?v=H-_1NM0LEHI

What the developer tools see

When using the Safari developer tools on a Mac connected to the iOS device, we can see what goes wrong:

Image at https://www.neunbeere.de/blog/wp-content/uploads/2017/12/iOSBugErrors.png

Some of the referenced javascript files could not be loaded. The set of javascript files that fail loading changes at every attempt. Sometimes when we are quick enough in opening the developer tools, the console will also give the following error message: “Failed to load resource: The certificate for this server is invalid. You might be connecting to a server that is pretending to be 10.50.75.208 which could put your confidential information at risk.”

Speculation: What’s the bug?

My speculation as to what is happening in Safari internally is the following: When Safari starts, it will try to load the list of accepted untrusted ssl certificates in a background task. For some reason, accessing this list and loading this list is not correctly synchronized so that during a short period after starting Safari, a check will be made against the list although is has not been fully loaded and the loading of some referrenced resources will then fail because the untrusted certificate used is not found in the incompletely loaded list..

The only solution to this problem I have found is to not use a self-signed certificate. You need to actually create your own local CA (Certiciate Authority), install this CA’s public certificate on the iPad, manually enable that it is trusted as a CA, then use this CA to create an SSL certificate and then install and use this SSL certificate in IIS (or some other webserver software)

You got any solution for this?

If Safari doesn't open a page or work as expected on your Mac

If Safari doesn't load a webpage, stops responding, quits unexpectedly, or otherwise doesn't work as expected, these solutions might help.

These solutions are for issues that can affect Safari on Mac, including issues such as these:

A webpage is blank, doesn't load all of its content, or otherwise doesn't work as expected.

You can't sign in to a webpage, despite using the correct sign-in information.

A webpage asks you to remove or reset cookies.

Safari slows down, stops responding, or quits unexpectedly.

Reload the page

From the menu bar in Safari, choose View > Reload Page. Or press Command-R.

If Safari doesn't reload the page, quit Safari, then try again. If Safari doesn't quit, you can press Option-Command-Esc to force Safari to quit .

If Safari automatically reopens unwanted pages, quit Safari, then press and hold the Shift key while opening Safari. Learn how to control which windows Safari automatically reopens .

Install software updates and restart

Update macOS , which can include updates for Safari. If your Mac didn't restart automatically, choose Apple menu  > Restart. Some important background updates take effect only after restarting.

Check Safari extensions

If you installed any Safari extensions, turn extensions off. From the menu bar in Safari, choose Safari > Settings (or Preferences). Click Extensions, then deselect each extension to turn it off. Learn more about Safari extensions .

If you find that an extension is causing the issue, make sure that the extension is up to date.

Test with a private window

A website can store cookies, caches, and other data on your Mac, and issues with that data can affect your use of the website. To prevent the website from using that data, view it in a private window: From the menu bar in Safari, choose File > New Private Window, or press Shift-Command-N.

If that works, use the following steps to remove the website's data, including its caches and cookies. The website can then create new data as needed. If it's a website that you sign in to, make sure that you know your sign-in information before continuing.

Choose Safari > Settings (or Preferences), then click Privacy.

Click Manage Website Data.

Select the affected website from the list shown.

Click Remove.

Click Done.

Open the website again in a non-private browser window.

Check Safari settings

The webpage might not be compatible with one or more browser settings, which you can turn on or off as needed. From the menu bar in Safari, choose Safari > Settings (or Preferences). Then click Websites, Privacy, or Security to access these settings:

Privacy settings . These settings apply to all websites. For example, a website might require that you allow cross-site tracking, show your IP address, or allow cookies.

Security settings . These settings apply to all websites. For example, a website might require that you enable JavaScript.

Websites settings . These settings can be configured for specific websites. For example, a website might require that you allow pop-up windows, allow downloads, allow access to your camera or microphone, or turn off content blockers.

Check iCloud Private Relay

If you subscribe to iCloud+ and are using its Private Relay feature, try reloading the page without Private Relay: From the menu bar in Safari, choose View > Reload and Show IP Address. This menu item appears only when Private Relay is turned on for your network. Learn more about iCloud Private Relay .

Check VPN or other security software

If you installed VPN or other software that monitors or interacts with your network connections, that software could affect your use of the website or the internet. Learn about network issues related to VPN and other software .

Check network settings

Certain network settings, such as custom proxy settings or custom DNS settings , can affect access to content on the internet. Even if you haven't changed these or other network settings yourself, you might have installed software that changed them for you.

To find out whether the issue is with the network settings on your Mac, try viewing the page from a different web browser or different device on the same network. Or reset your network settings by setting up a new network location on your Mac.

If the issue affects other devices and web browsers on the same network, the issue is probably with the website, and you should contact the website developer for help.

If the issue continues to affect only a particular webpage, contact the website developer for help.

Learn how to block pop-up ads and windows in Safari .

Learn what to do if your iCloud or Safari bookmarks aren't syncing .

Related topics

Explore Apple Support Community

Find what’s been asked and answered by Apple customers.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

Handling common JavaScript problems

• Overview: Cross browser testing

Now we'll look at common cross-browser JavaScript problems and how to fix them. This includes information on using browser dev tools to track down and fix problems, using Polyfills and libraries to work around problems, getting modern JavaScript features working in older browsers, and more.

The trouble with JavaScript

Historically, JavaScript was plagued with cross-browser compatibility problems — back in the 1990s, the main browser choices back then (Internet Explorer and Netscape) had scripting implemented in different language flavors (Netscape had JavaScript, IE had JScript and also offered VBScript as an option), and while at least JavaScript and JScript were compatible to some degree (both based on the ECMAScript specification), things were often implemented in conflicting, incompatible ways, causing developers many nightmares.

Such incompatibility problems persisted well into the early 2000s, as old browsers were still being used and still needed supporting. For example, code to create XMLHttpRequest objects had to have special handling for Internet Explorer 6:

This is one of the main reasons why libraries like jQuery came into existence — to abstract away differences in browser implementations, so a developer could just use, for example, jQuery.ajax() , which would then handle the differences in the background.

Things have improved significantly since then; modern browsers do a good job of supporting "classic JavaScript features", and the requirement to use such code has diminished as the requirement to support older browsers has lessened (although bear in mind that they have not gone away altogether).

These days, most cross-browser JavaScript problems are seen:

• When poor-quality browser-sniffing code, feature-detection code, and vendor prefix usage block browsers from running code they could otherwise use just fine.
• When developers make use of new/nascent JavaScript features, modern Web APIs, etc. in their code, and find that such features don't work in older browsers.

We'll explore all these problems and more below.

Fixing general JavaScript problems

As we said in the previous article on HTML/CSS, you should make sure your code is working generally, before going on to concentrate on the cross-browser issues. If you are not already familiar with the basics of Troubleshooting JavaScript , you should study that article before moving on. There are a number of common JavaScript problems that you will want to be mindful of, such as:

• Basic syntax and logic problems (again, check out Troubleshooting JavaScript ).
• Making sure variables, etc. are defined in the correct scope, and you are not running into conflicts between items declared in different places (see Function scope and conflicts ).
• Confusion about this , in terms of what scope it applies to, and therefore if its value is what you intended. You can read What is "this"? for a light introduction; you should also study examples like this one , which shows a typical pattern of saving a this scope to a separate variable, then using that variable in nested functions so you can be sure you are applying functionality to the correct this scope.
• Incorrectly using functions inside loops that iterate with a global variable (more generally "getting the scope wrong").

For example, in bad-for-loop.html (see source code ), we loop through 10 iterations using a variable defined with var , each time creating a paragraph and adding an onclick event handler to it. When clicked, we want each one to display an alert message containing its number (the value of i at the time it was created). Instead they all report i as 11 — because the for loop does all its iterating before nested functions are invoked.

The easiest solution is to declare the iteration variable with let instead of var —the value of i associated with the function is then unique to each iteration. See good-for-loop.html (see the source code also) for a version that works.

• Making sure asynchronous operations have completed before trying to use the values they return. This usually means understanding how to use promises : using await appropriately or running the code to handle the result of an asynchronous call in the promise's then() handler. See How to use promises for an introduction to this topic.

Note: Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make has some nice discussions of these common mistakes and more.

As with HTML and CSS , you can ensure better quality, less error-prone JavaScript code using a linter, which points out errors and can also flag up warnings about bad practices, etc., and be customized to be stricter or more relaxed in their error/warning reporting. The JavaScript/ECMAScript linters we'd recommend are JSHint and ESLint ; these can be used in a variety of ways, some of which we'll detail below.

The JSHint homepage provides an online linter, which allows you to enter your JavaScript code on the left and provides an output on the right, including metrics, warnings, and errors.

Code editor plugins

It is not very convenient to have to copy and paste your code over to a web page to check its validity several times. What you really want is a linter that will fit into your standard workflow with the minimum of hassle. Many code editors have linter plugins. For example, see the "Plugins for text editors and IDEs" section of the JSHint install page .

There are other ways to use such linters; you can read about them on the JSHint and ESLint install pages.

It is worth mentioning command line uses — you can install these tools as command line utilities (available via the CLI — command line interface) using npm (Node Package Manager — you'll have to install NodeJS first). For example, the following command installs JSHint:

You can then point these tools at JavaScript files you want to lint, for example:

You can also use these tools with a task runner/build tool such as Gulp or Webpack to automatically lint your JavaScript during development. (see Using a task runner to automate testing tools in a later article.) See ESLint integrations for ESLint options; JSHint is supported out of the box by Grunt, and also has other integrations available, e.g. JSHint loader for Webpack .

Note: ESLint takes a bit more setup and configuration than JSHint, but it is more powerful too.

Browser developer tools

Browser developer tools have many useful features for helping to debug JavaScript. For a start, the JavaScript console will report errors in your code.

Make a local copy of our fetch-broken example (see the source code also).

If you look at the console, you'll see an error message. The exact wording is browser-dependent, but it will be something like: "Uncaught TypeError: heroes is not iterable", and the referenced line number is 25. If we look at the source code, the relevant code section is this:

So the code falls over as soon as we try to use jsonObj (which as you might expect, is supposed to be a JSON object ). This is supposed to be fetched from an external .json file using the following fetch() call:

But this fails.

The Console API

You may already know what is wrong with this code, but let's explore it some more to show how you could investigate this. For a start, there is a Console API that allows JavaScript code to interact with the browser's JavaScript console. It has a number of features available, but the one you'll use most often is console.log() , which prints a custom message to the console.

Try adding a console.log() call to log the return value of fetch() , like this:

Refresh the page in the browser. This time, before the error message, you'll see a new message logged to the console:

The console.log() output shows that the return value of fetch() is not the JSON data, it's a Promise . The fetch() function is asynchronous: it returns a Promise that is fulfilled only when the actual response has been received from the network. Before we can use the response, we have to wait for the Promise to be fulfilled.

We can do this by putting the code that uses the response inside the then() method of the returned Promise , like this:

To summarize, anytime something is not working and a value does not appear to be what it is meant to be at some point in your code, you can use console.log() to print it out and see what is happening.

Using the JavaScript debugger

Unfortunately, we still have the same error — the problem has not gone away. Let's investigate this now, using a more sophisticated feature of browser developer tools: the JavaScript debugger as it is called in Firefox.

Note: Similar tools are available in other browsers; the Sources tab in Chrome, Debugger in Safari (see Safari Web Development Tools ), etc.

In Firefox, the Debugger tab looks like this:

• On the left, you can select the script you want to debug (in this case we have only one).
• The center panel shows the code in the selected script.
• The right-hand panel shows useful details pertaining to the current environment — Breakpoints , Callstack and currently active Scopes .

The main feature of such tools is the ability to add breakpoints to code — these are points where the execution of the code stops, and at that point you can examine the environment in its current state and see what is going on.

Let's get to work. The error is now being thrown at line 26. Click on line number 26 in the center panel to add a breakpoint to it (you'll see a blue arrow appear over the top of it). Now refresh the page (Cmd/Ctrl + R) — the browser will pause execution of the code at line 51. At this point, the right-hand side will update to show some very useful information.

• Under Breakpoints , you'll see the details of the break-point you have set.
• Under Call Stack , you'll see a few entries — this is basically a list of the series of functions that were invoked to cause the current function to be invoked. At the top, we have showHeroes() the function we are currently in, and second we have onload , which stores the event handler function containing the call to showHeroes() .
• Under Scopes , you'll see the currently active scope for the function we are looking at. We only have three — showHeroes , block , and Window (the global scope). Each scope can be expanded to show the values of variables inside the scope when execution of the code was stopped.

We can find out some very useful information in here.

• Expand the showHeroes scope — you can see from this that the heroes variable is undefined , indicating that accessing the members property of jsonObj (first line of the function) didn't work.
• You can also see that the jsonObj variable is storing a Response object, not a JSON object.

The argument to showHeroes() is the value the fetch() promise was fulfilled with. So this promise is not in the JSON format: it is a Response object. There's an extra step needed to retrieve the content of the response as a JSON object.

We'd like you to try fixing this problem yourself. To get you started, see the documentation for the Response object. If you get stuck, you can find the fixed source code at https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/fetch-fixed .

Note: The debugger tab has many other useful features that we've not discussed here, for example conditional breakpoints and watch expressions. For a lot more information, see the Debugger page.

Performance issues

As your apps get more complex and you start to use more JavaScript, you may start to run into performance problems, especially when viewing apps on slower devices. Performance is a big topic, and we don't have time to cover it in detail here. Some quick tips are as follows:

• To avoid loading more JavaScript than you need, bundle your scripts into a single file using a solution like Browserify . In general, reducing the number of HTTP requests is very good for performance.
• Make your files even smaller by minifying them before you load them onto your production server. Minifying squashes all the code together onto a huge single line, making it take up far less file size. It is ugly, but you don't need to read it when it is finished! This is best done using a minification tool like Uglify (there's also an online version — see JSCompress.com )
• When using APIs, make sure you turn off the API features when they are not being used; some API calls can be really expensive on processing power. For example, when showing a video stream, make sure it is turned off when you can't see it. When tracking a device's location using repeated Geolocation calls, make sure you turn it off when the user stops using it.
• Animations can be really costly for performance. A lot of JavaScript libraries provide animation capabilities programmed by JavaScript, but it is much more cost effective to do the animations via native browser features like CSS Animations (or the nascent Web Animations API ) than JavaScript. Read Brian Birtles' Animating like you just don't care with Element.animate for some really useful theory on why animation is expensive, tips on how to improve animation performance, and information on the Web Animations API.

Note: Addy Osmani's Writing Fast, Memory-Efficient JavaScript contains a lot of detail and some excellent tips for boosting JavaScript performance.

Cross-browser JavaScript problems

In this section, we'll look at some of the more common cross-browser JavaScript problems. We'll break this down into:

• Using modern core JavaScript features
• Using modern Web API features
• Using bad browser sniffing code
• Performance problems

Using modern JavaScript/API features

In the previous article we described some of the ways in which HTML and CSS errors and unrecognized features can be handled due to the nature of the languages. JavaScript is not as permissive as HTML and CSS however — if the JavaScript engine encounters mistakes or unrecognized syntax, such as when new, unsupported features are used, more often than not it will throw errors.

There are a few strategies for handling new feature support; let's explore the most common ones.

Note: These strategies do not exist in separate silos — you can, of course combine them as needed. For example, you could use feature detection to determine whether a feature is supported; if it isn't, you could then run code to load a polyfill or a library to handle the lack of support.

Feature detection

The idea behind feature detection is that you can run a test to determine whether a JavaScript feature is supported in the current browser, and then conditionally run code to provide an acceptable experience both in browsers that do and don't support the feature. As a quick example, the Geolocation API (which exposes available location data for the device the web browser is running on) has a main entry point for its use — a geolocation property available on the global Navigator object. Therefore, you can detect whether the browser supports geolocation or not by using something like the following:

You could also write such a test for a CSS feature, for example by testing for the existence of element.style.property (e.g. paragraph.style.transform !== undefined ). If you're looking to apply styles if a CSS feature is supported, you can directly use the @supports at-rule (known as a feature query). For example, to check whether the browser supports CSS container queries, you could do something like this:

As a last point, don't confuse feature detection with browser sniffing (detecting what specific browser is accessing the site) — this is a terrible practice that should be discouraged at all costs. See Using bad browser sniffing code , later on, for more details.

Note: Feature detection will be covered in a lot more detail in its own dedicated article, later in the module.

JavaScript libraries are essentially third party units of code that you can attach to your page, providing you with a wealth of ready-made functionality that can be used straight away, saving you a lot of time in the process. A lot of JavaScript libraries probably came into existence because their developer was writing a set of common utility functions to save them time when writing future projects, and decided to release them into the wild because other people might find them useful too.

JavaScript libraries tend to come in a few main varieties (some libraries will serve more than one of these purposes):

• Utility libraries: Provide a bunch of functions to make mundane tasks easier and less boring to manage. jQuery for example provides its own fully-featured selectors and DOM manipulation libraries, to allow CSS-selector type selecting of elements in JavaScript and easier DOM building. It is not so important now we have modern features like Document.querySelector() / Document.querySelectorAll() / Node methods available across browsers, but it can still be useful when older browsers need supporting.
• Convenience libraries: Make difficult things easier to do. For example, the WebGL API is really complex and challenging to use when you write it directly, so the Three.js library (and others) is built on top of WebGL and provides a much easier API for creating common 3D objects, lighting, textures, etc. The Service Worker API is also very complex to use, so code libraries have started appearing to make common Service Worker uses-cases much easier to implement (see the Service Worker Cookbook for several useful code samples).
• Effects libraries: These libraries are designed to allow you to easily add special effects to your websites. This was more useful back when "DHTML" was a popular buzzword, and implementing an effect involved a lot of complex JavaScript, but these days browsers have a lot of built in CSS features and APIs to implementing effects more easily.
• UI libraries: Provide methods for implementing complex UI features that would otherwise be challenging to implement and get working cross browser, for example Foundation , Bootstrap , and Material-UI (the latter is a set of components for use with the React framework). These tend to be used as the basis of an entire site layout; it is often difficult to drop them in just for one UI feature.
• Normalization libraries: Give you a simple syntax that allows you to easily complete a task without having to worry about cross browser differences. The library will manipulate appropriate APIs in the background so the functionality will work whatever the browser (in theory). For example, LocalForage is a library for client-side data storage, which provides a simple syntax for storing and retrieving data. In the background, it uses the best API the browser has available for storing the data, whether that is IndexedDB , Web Storage , or even Web SQL (which is now deprecated, but is still supported in Chromium-based browsers in secure contexts). As another example, jQuery

When choosing a library to use, make sure that it works across the set of browsers you want to support, and test your implementation thoroughly. Also make sure that the library is popular and well-supported, and isn't likely to just become obsolete next week. Talk to other developers to find out what they recommend, see how much activity and how many contributors the library has on GitHub (or wherever else it is stored), etc.

Library usage at a basic level tends to consist of downloading the library's files (JavaScript, possibly some CSS or other dependencies too) and attaching them to your page (e.g. via a <script> element), although there are normally many other usage options for such libraries, like installing them as Bower components, or including them as dependencies via the Webpack module bundler. You will have to read the libraries' individual install pages for more information.

Note: You will also come across JavaScript frameworks in your travels around the Web, like Ember and Angular . Whereas libraries are often usable for solving individual problems and dropping into existing sites, frameworks tend to be more along the lines of complete solutions for developing complex web applications.

Polyfills also consist of 3rd party JavaScript files that you can drop into your project, but they differ from libraries — whereas libraries tend to enhance existing functionality and make things easier, polyfills provide functionality that doesn't exist at all. Polyfills use JavaScript or other technologies entirely to build in support for a feature that a browser doesn't support natively. For example, you might use a polyfill like es6-promise to make promises work in browsers where they are not supported natively.

Let's work through an exercise — in this example used for demonstration purposes only, we use a Fetch polyfill and an es6-promise polyfill. While Fetch and promises are fully supported in modern browsers, if we were targeting a browser that did not support Fetch that browser would likely not support Fetch either, and Fetch makes heavy use of promises:

• To get started, make a local copy of our fetch-polyfill.html example and our nice image of some flowers in a new directory. We are going to write code to fetch the flowers image and display it in the page.
• Next, save a copy of the Fetch polyfill in the same directory as the HTML.
• Apply the polyfill scripts to the page using the following code — place these above the existing <script> element so they will be available on the page already when we start trying to use Fetch (we are also loading a Promise polyfill from a CDN, as IE11 does support promises, which fetch requires): html < script src = " https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js " > </ script > < script src = " https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js " > </ script > < script src = " fetch.js " > </ script >
• Inside the original <script> , add the following code: js const myImage = document . querySelector ( ".my-image" ) ; fetch ( "flowers.jpg" ) . then ( ( response ) => { response . blob ( ) . then ( ( myBlob ) => { const objectURL = URL . createObjectURL ( myBlob ) ; myImage . src = objectURL ; } ) ; } ) ;

Note: You can find our finished version at fetch-polyfill-finished.html (see also the source code ).

Note: Again, there are many different ways to make use of the different polyfills you will encounter — consult each polyfill's individual documentation.

One thing you might be thinking is "why should we always load the polyfill code, even if we don't need it?" This is a good point — as your sites get more complex and you start to use more libraries, polyfills, etc., you can start to load a lot of extra code, which can start to affect performance, especially on less-powerful devices. It makes sense to only load files as needed.

Doing this requires some extra setup in your JavaScript. You need some kind of a feature detection test that detects whether the browser supports the feature we are trying to use:

So first we run a conditional that checks whether the function browserSupportsAllFeatures() returns true. If it does, we run the main() function, which will contain all our app's code. browserSupportsAllFeatures() looks like this:

Here we are testing whether the Promise object and fetch() function exist in the browser. If both do, the function returns true. If the function returns false , then we run the code inside the second part of the conditional — this runs a function called loadScript(), which loads the polyfills into the page, then runs main() after the loading has finished. loadScript() looks like this:

This function creates a new <script> element, then sets its src attribute to the path we specified as the first argument ( 'polyfills.js' when we called it in the code above). When it has loaded, we run the function we specified as the second argument ( main() ). If an error occurs in the loading of the script, we still call the function, but with a custom error that we can retrieve to help debug a problem if it occurs.

Note that polyfills.js is basically the two polyfills we are using put together into one file. We did this manually, but there are cleverer solutions that will automatically generate bundles for you — see Browserify (see Getting started with Browserify for a basic tutorial). It is a good idea to bundle JS files into one like this — reducing the number of HTTP requests you need to make improves the performance of your site.

You can see this code in action in fetch-polyfill-only-when-needed.html (see the source code also ). We'd like to make it clear that we can't take credit for this code — it was originally written by Philip Walton. Check out his article Loading Polyfills Only When Needed for the original code, plus a lot of useful explanation around the wider subject).

JavaScript transpiling

Another option that is becoming popular for people who want to use modern JavaScript features now is converting code that uses recent ECMAScript features to a version that will work in older browsers.

Note: This is called "transpiling" — you are not compiling code into a lower level to be run on a computer (like you would say with C code); instead, you are changing it into a syntax that exists at a similar level of abstraction so it can be used in the same way, but in slightly different circumstances (in this case, transforming one flavor of JavaScript into another).

A common transpiler is Babel.js but there are others.

Don't browser sniff

Historically developers used browser sniffing code to detect which browser the user was using, and give them appropriate code to work on that browser.

All browsers have a user-agent string, which identifies what the browser is (version, name, OS, etc.). Many developers implemented bad browser sniffing code and didn't maintain it. This lead to supporting browsers getting locked out of using websites they could easily render. This became so common that browsers started to lie about what browser they were in their user-agent strings (or claim they were all browsers), to get around sniffing code. Browsers also implemented facilities to allow users to change what user-agent string the browser reported when queried with JavaScript. This all made browser sniffing even more error prone, and ultimately pointless.

History of the browser user-agent string by Aaron Andersen provides a useful and amusing take on the history of browser sniffing. Use feature detection (and CSS @supports for CSS feature detection) to reliably detect whether a feature is supported. But doing so, you won't need to change your code when new browser versions come out.

Handling JavaScript prefixes

In the previous article, we included quite a lot of discussion about handling CSS prefixes . Well, new JavaScript implementations used to use prefixes as well, with JavaScript using camel case rather than hyphenation like CSS. For example, if a prefix was being used on a new jshint API object called Object :

• Mozilla would use mozObject
• Chrome/Opera/Safari would use webkitObject
• Microsoft would use msObject

Here's an example, taken from our violent-theremin demo (see source code ), which uses a combination of the Canvas API and the Web Audio API to create a fun (and noisy) drawing tool:

In the case of the Web Audio API, the key entry points to using the API were supported in Chrome/Opera via webkit prefixed versions (they now support the unprefixed versions). The easy way to get around this situation is to create a new version of the objects that are prefixed in some browsers, and make it equal to the non-prefixed version, OR the prefixed version (OR any other prefixed versions that need consideration) — whichever one is supported by the browser currently viewing the site will be used.

Then we use that object to manipulate the API, rather than the original one. In this case we are creating a modified AudioContext constructor, then creating a new audio context instance to use for our Web Audio coding.

This pattern can be applied to just about any prefixed JavaScript feature. JavaScript libraries/polyfills also make use of this kind of code, to abstract browser differences away from the developer as much as possible.

Again, prefixed features were never supposed to be used in production websites — they are subject to change or removal without warning, and cause cross browser issues. If you insist on using prefixed features, make sure you use the right ones. You can look up what browsers require prefixes for different JavaScript/API features on MDN reference pages, and sites like caniuse.com . If you are unsure, you can also find out by doing some testing directly in browsers.

For example, try going into your browser's developer console and start typing

If this feature is supported in your browser, it will autocomplete.

Finding help

There are many other issues you'll encounter with JavaScript; the most important thing to know really is how to find answers online. Consult the HTML and CSS article's Finding help section for our best advice.

So that's JavaScript. Simple huh? Maybe not so simple, but this article should at least give you a start, and some ideas on how to tackle the JavaScript-related problems you will come across.

Want to highlight a helpful answer? Upvote!

Did someone help you, or did an answer or User Tip resolve your issue? Upvote by selecting the upvote arrow. Your feedback helps others!  Learn more about when to upvote >

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Safari is not loading some websites

MacPro, Monterey, Safari 15.4: today some websites I use frequently are not loading properly with Safari. The top page shows up, but when I click to do more, I get a "web site failed to load" message (or thereabouts).

I can access the same websites successfully from my iPhone and, on my desktop machine, with Chrome.

What's up?

Mac Pro, macOS 12.3

Posted on Apr 28, 2022 9:37 PM

Posted on May 30, 2022 5:28 AM

I am also having this issue and it just started a couple of days ago. The browser is up to date. Noting seems to fix the issue. I did not change any settings or anything, so why would Costco.com load on Tuesday and not on Wednesday morning?

Safari just hangs there, not loading anything. As I type this, it has been there for 30 minutes. Okay, so maybe its the website. So I try google.

Just hangs there. There is not even a gateway timeout page!

When I open chrome and try these sites, they load in the blink of an eye. No issues. What could be wrong with safari?

This is what I have tried:

Restart safari

Restart mac

Reload page

I cannot hard refresh the page, because it won't even load. Note that it is several sites and sometimes even the discussions.apple.com site.

Turned off extensions (why would they work yesterday and not today?)

Tested with private window

Cleared all history

Cleared all cache - this is the most fun. Now I have to two-factor authenticate all my fav sites all over again.

All software is up to date

Nothing was installed or updated since the issue's onset

Has anyone else had this issue recently? Is there a fix or do I need to move to chrome?

Similar questions

• Safari 14.1.1 I'm unable to load certain web pages Anyone aware of issues with Safari 14.1.1. - On several webpages I use daily I am unable to load the page. But on Chrome I have no issues with these sites. They are all very common high traffic sites like Ebay, etc... 749 4
• Safari Failed to load certain websites Why does safari sometimes not load websites? I tried refreshing, quiting and reopening but it doesn't work yet. 537 2
• Anyone else experiencing issues with Safari working properly with web sites they used to go to, banks, financial, auto, etc.? After the last few macOS/Safari updates (12.x) Safari has not worked properly when loading many web sites that previously worked. Bank, financial, auto manufacturer, sports, etc. web pages are not loading/working correctly. Entering information on many of these sites is also not working as before. If I use Firefox, I have not problem with these sites and they work the same as they did with Safari in the past. Is anyone else experiencing this issue, and if so is there a fix for the problem? 1675 11

Loading page content

Page content loaded

May 30, 2022 5:28 AM in response to tygb

Apr 28, 2022 10:44 PM in response to ruthsm

See the article If Safari on Mac doesn't open a webpage or isn’t working as expected - Apple Support

Jun 1, 2022 8:24 AM in response to tygb

Thank you so much! This worked. I would add that users should export their bookmarks to a file so they can re-import them after they delete the folder.

It would also be nice to stick that step in here: If Safari on Mac doesn't open a webpage or isn’t working as expected - Apple Support

May 30, 2022 8:53 PM in response to mikeym1108

Click on finder > take cursor on top menu bar > Go > keep on holding option key and click on library > Safari .

Delete the complete safari folder ( right click over it and move to bin ) , restart the Mac from apple logo , open safari .