mirror of
https://github.com/docsifyjs/docsify.git
synced 2025-12-08 19:55:52 +00:00
fix: fix cross-origin links in history router mode (#1967)
This commit is contained in:
parent
6a7d15b1d5
commit
2312feef45
@ -140,19 +140,6 @@ window.$docsify = {
|
||||
};
|
||||
```
|
||||
|
||||
## crossOriginLinks
|
||||
|
||||
- Type: `Array`
|
||||
|
||||
When `routerMode: 'history'`, you may face cross-origin issues. See [#1379](https://github.com/docsifyjs/docsify/issues/1379).
|
||||
In Markdown content, there is a simple way to solve it: see extends Markdown syntax `Cross-Origin link` in [helpers](helpers.md).
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
crossOriginLinks: ['https://example.com/cross-origin-link'],
|
||||
};
|
||||
```
|
||||
|
||||
## el
|
||||
|
||||
- Type: `String`
|
||||
@ -688,6 +675,7 @@ window.$docsify = {
|
||||
Define "virtual" routes that can provide content dynamically. A route is a map between the expected path, to either a string or a function. If the mapped value is a string, it is treated as markdown and parsed accordingly. If it is a function, it is expected to return markdown content.
|
||||
|
||||
A route function receives up to three parameters:
|
||||
|
||||
1. `route` - the path of the route that was requested (e.g. `/bar/baz`)
|
||||
2. `matched` - the [`RegExpMatchArray`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match) that was matched by the route (e.g. for `/bar/(.+)`, you get `['/bar/baz', 'baz']`)
|
||||
3. `next` - this is a callback that you may call when your route function is async
|
||||
@ -701,23 +689,23 @@ window.$docsify = {
|
||||
'/foo': '# Custom Markdown',
|
||||
|
||||
// RegEx match w/ synchronous function
|
||||
'/bar/(.*)': function(route, matched) {
|
||||
'/bar/(.*)': function (route, matched) {
|
||||
return '# Custom Markdown';
|
||||
},
|
||||
|
||||
// RegEx match w/ asynchronous function
|
||||
'/baz/(.*)': function(route, matched, next) {
|
||||
// Requires `fetch` polyfill for legacy browsers (https://github.github.io/fetch/)
|
||||
'/baz/(.*)': function (route, matched, next) {
|
||||
// Requires `fetch` polyfill for legacy browsers (https://github.github.io/fetch/)
|
||||
fetch('/api/users?id=12345')
|
||||
.then(function(response) {
|
||||
.then(function (response) {
|
||||
next('# Custom Markdown');
|
||||
})
|
||||
.catch(function(err) {
|
||||
.catch(function (err) {
|
||||
// Handle error...
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Other than strings, route functions can return a falsy value (`null` \ `undefined`) to indicate that they ignore the current request:
|
||||
|
||||
@ -65,14 +65,6 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set th
|
||||
[link](/demo ':disabled')
|
||||
```
|
||||
|
||||
## Cross-Origin link
|
||||
|
||||
Only when you set both the `routerMode: 'history'` and `externalLinkTarget: '_self'`, you need to add this configuration for those Cross-Origin links.
|
||||
|
||||
```md
|
||||
[example.com](https://example.com/ ':crossorgin')
|
||||
```
|
||||
|
||||
## GitHub Task Lists
|
||||
|
||||
```md
|
||||
|
||||
@ -12,7 +12,6 @@ export default function (vm) {
|
||||
catchPluginErrors: true,
|
||||
cornerExternalLinkTarget: '_blank',
|
||||
coverpage: '',
|
||||
crossOriginLinks: [],
|
||||
el: '#app',
|
||||
executeScript: null,
|
||||
ext: '.md',
|
||||
|
||||
@ -43,17 +43,6 @@ export const linkCompiler = ({
|
||||
);
|
||||
}
|
||||
|
||||
// special case to check crossorigin urls
|
||||
if (
|
||||
config.crossorgin &&
|
||||
linkTarget === '_self' &&
|
||||
compilerClass.config.routerMode === 'history'
|
||||
) {
|
||||
if (compilerClass.config.crossOriginLinks.indexOf(href) === -1) {
|
||||
compilerClass.config.crossOriginLinks.push(href);
|
||||
}
|
||||
}
|
||||
|
||||
if (config.disabled) {
|
||||
attrs.push('disabled');
|
||||
href = 'javascript:void(0)';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { noop } from '../../util/core';
|
||||
import { isExternal, noop } from '../../util/core';
|
||||
import { on } from '../../util/dom';
|
||||
import { endsWith } from '../../util/str';
|
||||
import { parseQuery, cleanPath, replaceSlug } from '../util';
|
||||
@ -48,7 +48,7 @@ export class HashHistory extends History {
|
||||
on('click', e => {
|
||||
const el = e.target.tagName === 'A' ? e.target : e.target.parentNode;
|
||||
|
||||
if (el && el.tagName === 'A' && !/_blank/.test(el.target)) {
|
||||
if (el && el.tagName === 'A' && !isExternal(el.href)) {
|
||||
navigating = true;
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { noop } from '../../util/core';
|
||||
import { isExternal, noop } from '../../util/core';
|
||||
import { on } from '../../util/dom';
|
||||
import { parseQuery, getPath } from '../util';
|
||||
import { History } from './base';
|
||||
@ -24,15 +24,10 @@ export class HTML5History extends History {
|
||||
on('click', e => {
|
||||
const el = e.target.tagName === 'A' ? e.target : e.target.parentNode;
|
||||
|
||||
if (el && el.tagName === 'A' && !/_blank/.test(el.target)) {
|
||||
if (el && el.tagName === 'A' && !isExternal(el.href)) {
|
||||
e.preventDefault();
|
||||
const url = el.href;
|
||||
// solve history.pushState cross-origin issue
|
||||
if (this.config.crossOriginLinks.indexOf(url) !== -1) {
|
||||
window.open(url, '_self');
|
||||
} else {
|
||||
window.history.pushState({ key: url }, '', url);
|
||||
}
|
||||
window.history.pushState({ key: url }, '', url);
|
||||
cb({ event: e, source: 'navigate' });
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user