Next.js如何引入百度分享(外部引用)类似的外部js，以及如何操作window

前言

近期使用React官方推荐的服务端渲染工具Next.js进行服务端页面编程时遇到引入百度分享等外部JS文件的问题。

Next.js可以使用内置组件来装在 <head> 到页面中

import Head from 'next/head'export default () =><div><Head><title>My page title</title><meta name="viewport" content="initial-scale=1.0, width=device-width" /></Head><p>Hello world!</p></div>

那么我们就可以用这个特性引入外部js文件了，下面是引入百度分享的例子：

import Head from 'next/head'export default () =><div><Head><title>My page title</title><meta name="viewport" content="initial-scale=1.0, width=device-width" /><script>{`             with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];`}</script>
</Head></div>

这样就很好解决了怎么引入类似百度分享一类的外部js文件的问题，但是百度分享自身会存在一个问题：百度分享异步操作加载进页面的时候不会立即渲染，因为因为百度分享执行后，会创建全局的window.__bd_share_main，所以需要在 ajax请求完成后执行一下window.__bd_share_main.init();

但是由于window操作是客户端行为，而Next.js自身是服务端渲染(SSR)的原因是没有window对象的，解决办法是利用Next.js动态导入，官方文档有说明，动态导入是可以禁止SSR的,如下：

import dynamic from 'next/dynamic'const DynamicComponentWithNoSSR = dynamic(import('../components/hello3'), {ssr: false
})export default () =><div><Header /><DynamicComponentWithNoSSR /><p>HOME PAGE is here!</p></div>

像官方文档一样动态引入百度分享所在组件即可解决问题了

// 禁止ssr
const ShareCol = dynamic(import('../components/sharecol'),{ssr:false})

百度分享组件中，在componentDidMount钩子函数中操作如下

componentDidMount(){if(window._bd_share_main){         window._bd_share_main.init();}    }

其他类似的外部引入问题也可以这样解决

Next.js如何引入百度分享(外部引用)类似的外部js，以及如何操作window相关推荐

js加载html的head偶尔失效,外部 js 文件偶尔会加载失败
最近有一个很奇怪的问题一直困扰着我: html 页面中,head部分引入了几个外部js文件. 比如: // 目前页面结构就是这样,其他的代码都和此异常无关,就不多贴了. // 这里就直接报错,显示 V ...
vue实例中调用外部js_vue中引入外部js方法实例
我们在做vue项目时,经常会需要引入js,常用的有以下几种.本文主要和大家分享vue中引入外部js方法实例,希望能帮助到大家. 第一种import XX from "路径" Vue ...
html中如何引入vue,vue.js怎样引入到HTML中,vue引入第三方js库
vue.js怎样引入到HTML中如何将vue.js引入HTML,把vue.js引入HTML的方法:一.下载vue . js:然后在HTML中添加vue.js包,其语法为"script src ...
JavaScript——JS的引入方式
文章目录 JavaScript--我的第一个JavaScript程序以及JS的引入方式初识JavaScript 我的第一个JS程序 JS的引入方式外部引入方式嵌入式内部引用方式行内引用 Ja ...
JS延迟加载百度分享代码，提高网页速度
相信大家经常在一些网站上看到有快捷分享到各大流行网站的按钮,目前流行的有JiaThis.百度分享.Bshare等,目前用百度分享的居多. 发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固 ...
odoo openerp 分享-oe嵌入qweb】用js读取数据库数据，用类似html语言重写web报表
[分享-oe嵌入qweb]用js读取数据库数据,用类似html语言重写web报表 (阅读 4403 次) 阿狸新手上路帖子: 26 人气: 1 开启阅读模式 [分享-oe嵌入qweb]用js读取 ...
百度分享share.js插件
//百度分享window._bd_share_config = { common : { bdText : '分享标题', bdDesc : '分享描述', bdUrl : '分享链接', bdPic ...
百度分享支持https
站点自从开启 https 之后 ,百度分享就不能用了!但是又寻找不到类似百度分享的替代品.. 怎么办呢?要如何解决百度分享不支持https的问题呢, 跟着博主动动手,让你百度分享仍然能在https下 ...
百度分享--分享按钮的实现
百度分享代码: <%@ page contentType="text/html;charset=UTF-8"%> <div class="bdsh ...

Next.js如何引入百度分享(外部引用)类似的外部js，以及如何操作window

前言

Next.js如何引入百度分享(外部引用)类似的外部js，以及如何操作window相关推荐

最新文章

热门文章