InstantClick makes following links in your website instant.

Last update: Jan 5, 2023

Related tags

Overview

InstantClick

All the informations you need to use InstantClick are on the link above. This ReadMe’s purpose is about how to use and contribute to a development version of InstantClick.

Tests

Tests (in the tests folder) are PHP-generated HTML pages with which to check how InstantClick behaves on different browsers. That’s what I use before releasing a new version to make sure there are no obvious regressions.

To access the suite of tests, run php -S 127.0.0.1:8000 from the tests folder and head to http://127.0.0.1:8000/.

Contributing

See the Contributing.md file.

Comments

Suggestion: Only preload pages once per page load

Hey it seems like repeatedly mousing over over links is loading the next page multiple times. I think limiting preloading to once per page load or something like once every 30 sec would really help cut down on page loads on the backend.

opened by robgraeber 9
Safari 7.0.1 OS X

When using the script on the above, on page changes the page will go white unless you refresh the page resulting in the following in console.

TypeError: 'undefined' is not an object (evaluating 'script.hasAttribute') line 117

Line 117: if (script.hasAttribute("data-no-instant"))

This is using the minified production and straight-up development version, error above is using dev version for clarity.

opened by Coopeh 9
Is this project no longer being developed?

It seems that development has been dead for about a year now. Plentiful promises of 4.0 coming soon, with fixes to many issues; yet no sign of even a remote update from the developer.

Looks like I will be removing this from my site; there is no point using something as a foundation for your website knowing that its dead in the water.

Please give us an update at least on the status of 4.0?

opened by QuantumRevenger 8
Feedback on the loading indicator

You should also integrate the spinner from nprogress.

I'm testing out the master of IC with the progress bar and the progress bar becomes annoying and flashy when quickly navigating a site.

The spinner should be optional and separated from the progress bar.

P.S. you should separate the CSS from JS.

opened by Voyager-Two 8
Requesting insecure content
Setup:

Github Pages

Cloudflare SSL

Using relative or absolute URLS, sometimes the preload gets blocked. This means that URLs require two clicks to get to a page.

Mixed Content: The page at 'https://tomrobertshaw.net/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://tomrobertshaw.net/projects/'. This request has been blocked; the content must be served over HTTPS.

It appears that the first request is for the HTTPS URL but this gets cancelled. The second request is for HTTP which gets blocked.

I haven't been able to work out why some URLs work and some don't work with instant click.
opened by bobbyshaw 7
Styles in the head are not loaded

The stylesheets, when included in the <head> are not loaded when the page is displayed. I had to include them in the <body> for them to be loaded.

opened by pedrokost 7
Breaks browsers back and forth

Mobile all is fine but on my laptop neither firefox or chromium can handle back and forth navigation with instantclick included. Is there a workaround?

opened by ghost 6
Some reasonable rate limiting

If you just absentmindedly move your cursor around a page for a few seconds, you can end up triggering 4 or 5 requests to the same URL. I get that you don't want "fetch once, cache forever" so that this works well with dynamic content. But firing off multiple requests to the same URL within the span of a second or two is just unnecessary.

I propose that there be a cache that holds on to pages for 5 seconds. If you need your site to be more dynamic than that, well, don't use this script.

opened by markjaquith 6
Warn users who abuse GET
Some places like to abuse GET requests.

Imagine <a href='/logout'>Log Out</a> , the users hovers over it, it is instaclicked and the user is logged out. I think there should be a warning about this and possibly a way to opt out it of. (as in, a black list)

Maybe also a black list in the plugin itself to forbid things like:

if([ "login","logout","delete","remove","update","save","submit"].some(x=> href.contains(x))){ //early return }

Or in ES3 (No lambdas, no some,no contans)

var arr = ["login","logout","delete","remove","update","save","submit"]; for(var i = 0; i < arr.length; i ++){ if(href.indexOf(arr[i]) !== -1){ //early return } }
opened by benjamingr 6
Make InstantClick work on more sites without configuration
The goal of these changes is to make IC work on more sites without requiring the addition of data- attribute configuration. Before these changes, it was common for sites which had changes in their head to break after IC navigation. I tried to make the commit messages descriptive, so please consult them for a specific list of the changes required.

Here's a few examples of sites broken w/ master which now work:

dropbox.com – Click “Mobile” in the footer

mit.edu – Click “About” or “Visiting"

twitter.com/privacy – Click “About Us” in the footer

nytimes.com – Click “Opinion” in the top nav, or worse, click an article title

apple.com – Click “iPhone"

github.hubspot.com/offline/docs/welcome – Click “Documentation”

The one note about these changes is they don't target Firefox before version 13. This amounts to about 0.2% of the web browser market. If this is an issue, let me know and I will tweak the solutions to work on those older browsers as well.
Enhancement
opened by zackbloom 5
Custom selector
Would it be possible to use selectors instead of creating blacklist and whitelist? I am working on a Wordpress site and I would like to add preload functionality just to some link (i.e. menu links, footer links, content). Currently, my options are: blacklist all others links (admin bar, link to social networks) or whitelist the ones I am interested in preload. In both cases I have to work on server-side to add the required attributes to the links. Wouldn't it be easier to have a parameter to tell the script which links should have the preload? Something like

InstantClick.init('.menu a'); InstantClick.init('.hentry a'); InstantClick.init('.footer a');

This would definitely make easier selecting (and knowing) which links would have the preload capability. I have seen the plugin uses

document.getElementsByTagName('a')

to retrive all links. Perhaps

document.querySelectorAll(selector)

would be slower, but would allow more flexibility on the target links. What do you think?
opened by pasine 5
When new page opens with different template the CSS is skipped

How can I resolve this issue when I click on a link that is in the same template as my website it seems fine. But as soon as I click on a link that has a different template which needs a new CSS it loads but is deformed. No CSS results in style issues.

I use xenforo 2.2.11 CMS

opened by Umairali11111 0
Cannot read property 'appendChild' of null

Error: Uncaught TypeError: Cannot read property 'appendChild' of null at update (instantClick.js?v=7679573946998831101:592) at start (instantClick.js?v=7679573946998831101:564) at Object.done (instantClick.js?v=7679573946998831101:607) at changePage (instantClick.js?v=7679573946998831101:172) at display (instantClick.js?v=7679573946998831101:496) at HTMLBodyElement.click (instantClick.js?v=7679573946998831101:262) update @ instantClick.js?v=7679573946998831101:592 start @ instantClick.js?v=7679573946998831101:564 done @ instantClick.js?v=7679573946998831101:607 changePage @ instantClick.js?v=7679573946998831101:172 display @ instantClick.js?v=7679573946998831101:496 click @ instantClick.js?v=7679573946998831101:262

The issue seems caused be missing from the "new" page

opened by Dkhodos 0
utteranc.es support

When I move to the page which has utteranc.es script element, The script fails. It seems to some not-allowed attributes of script elements are ignored by instantclick. It's the same even with data-* (custom data attributes).

opened by dolsup 0
Scripts with data-no-instant get re-evaluated when pressing the back button

Navigating from an instantclick-powered page to another by pressing a link, and than using the back button, returning to the previous page causes scripts with the data-no-instant attribute to get re-evaluated. This breaks any events added in scripts with the attribute

opened by martonlederer 0
Character encoding

I have a problem when loading a page it prints "&nbsp" instead of spaces and other characters like "%5C" instead of \ . How could I solve this coding problem. Thank you

opened by hortigado 0
Stop menu from opening when back button is clicked
I just have a minor issue and that is when I click on my full screen menu and click on one of the menu items and then click the back button the full screen menu is open again? I know it has something to do with it remembering the last state the page was at before I clicked on an item.

Is there a way to avoid that when using InstantClick?

The script I am using is this one:

/* Open when someone clicks on the span element */ function openNav() { document.getElementById("myNav").style.width = "100%"; } /* Close when someone clicks on the "x" symbol inside the overlay */ function closeNav() { document.getElementById("myNav").style.width = "0%"; }

Thanks in advance.
opened by devemmastone 0

InstantClick makes following links in your website instant.

Related tags

Overview

Tests

Comments

Owner

Alexandre Dieulot

A Browser extension that not only makes your browsing experience safe but makes it optimized

A JavaScript module that shortens your code, makes life easier, and makes development faster!

Instant spotlight like search and actions in your browser with Sugu Search.

A web-application I created to practice for my CCNA 201-300 exam. It includes most of the questions from the module exams. My goal was to create a fast and clean interface, with the option to combine different module, randomized questions and instant feedback,

Simple shopping cart prototype which shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scalable code in e-commerce applications.

Multi-chain sniper bot to buy and sell tokens on ETH compatible chains. Features include instant or mempool sniping, rug protection, and sell management.

🍭 search-buddy ultra lightweight javascript plugin that can help you create instant search and/or facilitate navigation between pages.

A live instant messaging app that translates user messages into the other user's preferred language.

Seamlessly connect your web server to Rebrandly so that you can re-use your domain name for both your app and your short links

Web UI kit following simply superb.'s design system, based on Tailwind CSS.

Application built following the Udemy course "React Front To Back 2022"

Following the project from Nabendu Biswas's MERN Projects book

Go to Definition following alias redirections.

Algorithms and Data Structures implemented in TypeScript for beginners, following best practices.

Easy view and filter all follows and following. Auto update by GitHub Action.

This project is the capstone for module two of Microverse Bootcamp and has been done as a team and covered the following topics: - Connections to external APIs - Testing program functionalities using Jest - Displaying some products in to the UI - Added like and Comment features to the App

a web crawler that crawls website links & fetches SEO Data