Logo

SharePoint Online 为Modern Page添加脚本

photo

2022年05月25日

  前言

  众所周知,如果我们想向SharePoint 页面添加脚本,最方便的便是经典页面,添加方式主要有内容编辑器Web部件或者直接使用SharePoint Designer。

  但是,如果页面是Modern 页面,我们没办法向里面添加脚本,无论是两种方式都没办法做到。当然,除了SharePoint Framework开发的Webpart。

  正文

  1.这里,我们就开发了一个基于SharePoint Framework的WebPart,可以帮助我们向SharePoint Modern页面添加脚本,来完成一些需求。

  Tips:WebPart的功能非常简单,就是向页面中添加了一个Div元素,ID可以在右侧的属性面板里配置。同时,可以添加一个外部JavaScript文件引用,也是在右侧的属性面板里进行配置。

  2.一般来说,我们会在这个引入的外部JavaScript文件中添加我们需要的代码,诸如获取SharePoint Online列表项目,引入JQuery库,等等。

  我这里也做了一个简单的例子,就是引用JQuery和SharePoint Plus文件,前者用来操作DOM,后者用来请求数据。

  Tips:这里面要说的是loadScript这个方法,是同步添加外部引用其它JS的方法,为的是添加引用以后回调函数,防止异步造成还没添加完引用,就执行了函数。

  3.我们可以看一下这个效果,如下图:

  1)首先是测试列表的测试数据截图:

  2)然后是刚刚进入页面的效果,会是一个loading的效果,一般会有1秒左右的加载时间,当然也取决于你的脚本的功能和逻辑的复杂度:

  3)然后是数据加载出来,显示的效果,如下图:

  结束语

  这个,是霖雨无聊间做的一个小部件,觉得蛮有意思的就分享给大家,有需要的自己可以尝试一下。

  Github:linyus/LinyuInjectionScriptWebpart (github.com)

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它
本文为原创文章,请注意保留出处!
ElementUI快速入门 2022年05月25日

本文主要从几个方面快速入门ElementUI1、什么是ElementUI?掌握elementU...ElementUI快速入门

热门文章

WordPress 后台编辑器样式实现直接预览 在WordPress3.0以后,有一个新的实用功能:你可以更改默认后台编辑器(TinyMCE)的样...WordPress后台编辑器样式实现直接预览 作者:Pastore Antonio
1451 浏览量
【干货】Chrome插件(扩展)开发全攻略 写在前面我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的...【干货】Chrome插件(扩展)开发全攻略 作者:Pastore Antonio
1415 浏览量
CentOS 编译错误+配置错误解决方法集合 ERROR:theHTTPXSLTmodulerequiresthelibxml2/l...CentOS编译错误+配置错误解决方法集合 作者:Pastore Antonio
1409 浏览量
WordPress中加载JavaScript脚本的方法 在WordPress中加载脚本(为CSS和JS,下同)文件,大多数人的做法是直接在hea...WordPress中加载JavaScript脚本的方法 作者:Pastore Antonio
1385 浏览量
wordpress学习五: 通过wordpress_xmlrpc的python包远程操作wordpress wordpress提供了丰富的xmlrpc接口api来供我们远程操控wp的内容。伟大的开源社区有人就...wordpress学习五:通过wordpress_xmlrpc的python包远程操作wordpress 作者:Pastore Antonio
1382 浏览量