Comments (9)
https://en.wikipedia.org/wiki/Same-origin_policy
does describe it finds subdomains to be a different host than the original domain.
What were they thinking?!
Is there a workaround that can work with Barba?
from barba.
Hello @ideaprison .
This is not a problem of the ajax request, but a security limitation of the HTML5 PushState API.
From the documentation:
The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception.
from barba.
Ugh, how idiotic..
Thanks for the fast respons though, at least I know what the problem is now.
from barba.
You may try some some crazy thing like:
- Disable pushstate
- Keep the new url in an hash (es. mystartsubdomain.site.com/#url=mynewsubdomain.site.com)
Then on the page load, if you detect the hash #url, redirect to that url.
Of course this would imply a fork of barba.js and modify some core functions like the onpopstate change and etc.
But it's the only way I think if you want to keep different subdomain.
Anyway it's strange that you have that error, ideally when barba.js can't do the pushstate should redirect to that url: https://github.com/luruke/barba.js/blob/master/src/Pjax/Pjax.js#L224
I will try to do some testing :)
from barba.
Oh, you're right it did forward to the page, I disabled your check to see if I could get it to work with the subdomain loading.
from barba.
@ideaprison did you pursue this any further? I was hoping to do something similar.
from barba.
There isn't a pretty workaround at this time. But depending on your transition animation.
You can edit the function in Barba.js so that any links that are detect not to be on the same domain will have a different transition. IE if you fade-in/out. You can then write your code to fade out the site, then load the subdomain, and have your site always load fading in. Because most browsers now hold the page while loading the next. So the transition (in this example fade-in/out) will look the same (but load less quickly then the pages on the same (sub)domain.
Hope I'm making sense.
from barba.
OK, thanks for letting me know. So if I'm understanding correcting, assuming you were only concerned with external links, there'd probably be no reason to include Barba in the above scenario. Right?
from barba.
Correct. Then you could just rewrite your links a bit with something like:
$('a.linkClass').on( "click", function(e) {
$target = $(this).attr('href');
showLoader(); // example function to show a transition.
// Else do something like $('#content').fadeOut({
// window.location.href = $target;
// }, 500);
setTimeout(function(){
// OPEN PAGE NOW
window.location.href = $target;
}, 2000); // timing depends on what you want to do for a transition.
e.preventDefault();
});
from barba.
Related Issues (20)
- `RangeError` on manual hash change
- How to check for barbacontainer HOT 1
- Safari flash the leaving container HOT 6
- Add support for multiple `namespace` in `Views`
- Improve `next.container` availability
- About `View` transitions API HOT 3
- POST Form transition HOT 1
- Source map failed to load HOT 3
- Compiling error HOT 1
- Disable `prefetch` on specific links HOT 1
- Maintain element on transition HOT 1
- Typescript issue with documentation example HOT 1
- Page content is duplicated when opened HOT 1
- CSP violation from parseFromString HOT 1
- Back button not working as intended after clicking anywhere on the page HOT 7
- Improve Google Analytics guide in the documentation
- Change the wrapper/container on the fly? HOT 3
- Typescript can't find declaration folder because the name is wrong HOT 5
- Remove polyfill.io from documentation HOT 1
- When linking to pages with hashes, hash does not appear in final URL HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from barba.