原生 js 创建 DOM 节点并插入页面,几个记录
创建 <script> 外部引入 js 文件:
需求:想要在页面中引入外部 js 文件,但是因各种原因不能直接在根页面引入 <script src="//xxx/xxxxx.js"></script>,可以封装一个方法,采用 appendChild 插入节点。
loadScript(src) { const headElement = document.head || document.getElementsByTagName('head')[0]; const _importedScript = {}; return new Promise((resolve, reject) => { if (src in _importedScript) { resolve(); return; } const script = document.createElement('script'); script.type = 'text/javascript'; script.onerror = err => { headElement.removeChild(script); reject(new URIError(`The Script ${src} is no accessible.`)); } script.onload = () => { _importedScript[src] = true; resolve(); } headElement.appendChild(script); script.src = src; }) } loadScript('https://xxx/xxxxx.js')
借鉴:保利威云点播Web播放器官方文档,react 写法的部分代码:https://dev.polyv.net/2020/videoproduct/v-player-sdk/v-player-sdk-web/integration/
navigation.ts
export function openExternalUrl(url: string, target?: string) { const a = document.createElement('a') a.setAttribute('href', url) a.setAttribute('target', target || '_blank') document.body.appendChild(a) a.click() document.body.removeChild(a as HTMLElement) }