如何实现 Mozilla 的可读性.js我的网站?

https://github.com/mozilla/readability(可读性.js用于创建网页的读取视图)

如何实现可读性.js此测试网页的问题是,可读性.js删除了本网站的元素,我想保留并留下那些应该删除的元素。我希望有人能帮助我。谢谢!是否有任何关于如何使用可读性的文档.js?

<html><head>

<title>Reader View shows only the browser in reader view</title>

    <script src="https://raw.githack.com/mozilla/readability/master/Readability.js"></script>

</head>

<body>

Everything outside the main div tag vanishes in Reader View<br>

<img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+should+vanish+in+print+view">

<div>

   <h1>H1 tags outside ot a p tag are hidden in reader view</h1>

   <img class="no-print" src="http://dummyimage.com/1024x100/000/ffffff&text=This+banner+is resized+in+print+view">

   <p>

 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789

 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789

 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789

 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789

 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789

 123456789 123456

</p>

</div>

</body>

    <script>

    var article = new Readability(document).parse();

    </script>

</html>

测试页面的来源:优化网站以在 Firefox 中显示读者视图


慕的地6264312
浏览 148回答 3
3回答

元芳怎么了

您可以将DOM纯化和可读性一起使用,就像他们在文档中提到的那样 -import { Readability } from '@mozilla/readability'import DOMPurify from 'dompurify';function readable(doc) {&nbsp; const reader = new Readability(doc)&nbsp; const article = reader.parse()&nbsp; return article}let cloneDoc = document.cloneNode(true)let parsed = readable(cloneDoc)const markup = DOMPurify.sanitize(parsed.content)markup将是可读内容的 html 字符串。尝试查看可用的属性。console.log(parsed)

慕村9548890

你试过这个吗?从他们的github页面:“可读性的解析()通过修改DOM来工作。这将删除网页中的某些元素。您可以通过在创建可读性对象时传递文档对象的克隆来避免这种情况。var&nbsp;documentClone&nbsp;=&nbsp;document.cloneNode(true);&nbsp; var&nbsp;article&nbsp;=&nbsp;new&nbsp;Readability(documentClone).parse();您可以创建 dom 对象的副本,这样您就不会实际修改实际的 dom

拉风的咖菲猫

好。。。。&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("body").innerHTML&nbsp;=&nbsp;"<font&nbsp;face='Calibri'&nbsp;size='4'>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<h1>"+article.title+"</h1>"+article.content;
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript