登录 注册

求助在思源里使用一言

本贴最后更新于 804 天前，其中的信息可能已经事过景迁

小白提问

<div>
<p id="hitokoto"><a href="#" id="hitokoto_text">:D 获取中...</a></p>
<script>
    fetch('https://v1.hitokoto.cn')
        .then(response => response.json())
        .then(data => {
            const hitokoto = document.getElementById('hitokoto_text')
            hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
            hitokoto.innerText = data.hitokoto
        })
        .catch(console.error)
</script>
</div>
​

以上是一言的 api 使用方式，我想在思源里直接插入 html 好像不行
控制台会显示：Cannot set properties of null (setting 'href')

这个应该怎么办呀 😭

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    25375 引用 • 104798 回帖 • 2 关注
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    9705 引用 • 44146 回帖 • 91 关注
北京 位置
20 悬赏
4 回帖
2
2
443 87 68 169 1 10 108

相关帖子

4 回帖
求助在思源里使用一言

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • Undii • • 1 评论
    付费者 捐赠者

    凑合用的方法……

    <div>
    <p id="hitokoto"><a href="#" id="hitokoto_text">:D 获取中...</a></p>
    <script>
        [].forEach.call(document.querySelectorAll("protyle-html[data-content*='hitokoto']"), function(value){
            fetch('https://v1.hitokoto.cn')
            .then(response => response.json())
            .then(data => {
                const hitokoto = value.shadowRoot.getElementById("hitokoto_text");
                hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
                hitokoto.innerText = data.hitokoto
            })
            .catch(console.error)
        });
    </script>
</div>
​
    1 回复
    其实把原来的代码改成挂件更稳定一些。
    Undii • • 1
  • Lorangeve •
    作者 
    protyle-html[data-content*='hitokoto']
​

    请问为什么非得这么复杂的方式才能访问到这个元素呀，这个有 api 文档吗

    1 回复
  • Undii • via Android
    付费者 捐赠者

    没，我自己瞎弄的，这样做不是定位到这个 html 块，而是所有带 hitokoto 的 html 块。下面我理解的也可能不对。

    现在思源好像把 html 块挂在 protyle-html 元素下的 shadowRoot，这样做 html 块的 dom 和主界面就独立了。而这个 html 块中的 script，document 对应的是主界面的，不是 html 块（shadowRoot）的。要访问到这个 shadowRoot，好像只能到定位到上层的 protyle-html，然后.shadowRoot 访问到里面的 hitokoto_text。

    或许有其他方法可以直接 document 访问，但我不会(இωஇ )。

    1 回复
  • Lorangeve •
    作者

    🙏 感谢解答，我之前一直很奇怪为什么 html 块的 css 只在 html 块中生效，但 js 代码访问的 dom 却是主界面的 😭

Lorangeve
北京
回帖
2
 帖子
1
 积分
471

近期热议

推荐标签 标签

  • 音乐

    你听到信仰的声音了么？

    62 引用 • 512 回帖
  • Flutter

    Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作，它正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 3 关注
  • SQLite

    SQLite 是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖 • 1 关注
  • SVN

    SVN 是 Subversion 的简称，是一个开放源代码的版本控制系统，相较于 RCS、CVS，它采用了分支管理系统，它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 690 关注
  • Follow
    4 引用 • 12 回帖 • 13 关注
  • 房星科技

    房星网，我们不和没有钱的程序员谈理想，我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源，遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 592 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

    下一代的社区系统，为未来而构建

    524 引用 • 4601 回帖 • 707 关注
  • TGIF

    Thank God It's Friday! 感谢老天，总算到星期五啦！

    290 引用 • 4494 回帖 • 655 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的 18 人，于 1999 年在中国杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 63 关注
  • 面试

    面试造航母，上班拧螺丝。多面试，少加班。

    325 引用 • 1395 回帖 • 1 关注
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    58 引用 • 25 回帖 • 1 关注
  • RESTful

    一种软件架构设计风格而不是标准，提供了一组设计原则和约束条件，主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

    30 引用 • 114 回帖 • 7 关注
  • OpenCV
    15 引用 • 36 回帖 • 5 关注
  • LeetCode

    LeetCode（力扣）是一个全球极客挚爱的高质量技术成长平台，想要学习和提升专业能力从这里开始，充足技术干货等你来啃，轻松拿下 Dream Offer！

    209 引用 • 72 回帖
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台，用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统（CMS）来使用。WordPress 是一个免费的开源项目，在 GNU 通用公共许可证（GPLv2）下授权发布。

    66 引用 • 114 回帖 • 190 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识，提高团队的工作效率，让用户满意。

    3 引用 • 8 回帖 • 1 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时，提供更无缝的用户体验。

    1 引用 • 2 回帖 • 81 关注
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 549 关注
  • Excel
    31 引用 • 28 回帖
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 4 关注
  • gRpc
    11 引用 • 9 回帖 • 91 关注
  • 链书

    链书（Chainbook）是 B3log 开源社区提供的区块链纸质书交易平台，通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书，我们共同构建这个全新的交易平台，让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线，也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 20 关注
  • App

    App（应用程序，Application 的缩写）一般指手机软件。

    91 引用 • 384 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

    730 引用 • 1280 回帖 • 5 关注

最新标签