如何在我的网站上实现Mozilla readability.js？
如何在我的网站上实现Mozilla readability.js？
提问于 2020-06-11 06:38:02
https://github.com/mozilla/readability (readability.js用于创建网页的read视图)
我如何实现这个测试网页的readability.js问题是，readability.js删除了这个网站中我想保留的元素，而留下了那些应该删除的元素。我希望有人能帮助我。谢谢!有没有关于如何使用readability.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>回答 3
Stack Overflow用户
发布于 2020-08-17 05:00:09
你试过这个吗？
在他们的github页面上：
“Readability的parse()通过修改DOM来工作。这会删除网页中的某些元素。您可以通过在创建Readability对象时传递document对象的克隆来避免这种情况。”
var documentClone = document.cloneNode(true);
var article = new Readability(documentClone).parse();您可以复制dom对象，这样就不会实际修改真正的dom。
Stack Overflow用户
发布于 2020-08-26 22:23:19
你可以将DOMPurify和可读性一起使用，就像他们在文档中提到的那样。
import { Readability } from '@mozilla/readability'
import DOMPurify from 'dompurify';
function readable(doc) {
const reader = new Readability(doc)
const article = reader.parse()
return article
}
let cloneDoc = document.cloneNode(true)
let parsed = readable(cloneDoc)
const markup = DOMPurify.sanitize(parsed.content)markup将是可读内容的html字符串。尝试使用console.log(parsed)查看可用的属性。
Stack Overflow用户
发布于 2020-06-12 01:25:02
好的..。
document.getElementById("body").innerHTML = "<font face='Calibri' size='4'>
<h1>"+article.title+"</h1>"+article.content;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62314251
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号