获取当前HTML和未来的HTML

Question

我有一个WebExtension处理网站的HTML body，将其发送到后端，后端修改了一些文本，然后用后端的响应替换旧的HTML。问题是这可能需要一点时间，所以我想用合理的块来处理文本，一次说3段或200个单词。

将HTML分解为这些块的好方法是什么，而不会破坏任何元素等？如果我只能处理用户当前在屏幕上看到的任何内容，那将特别酷。

PS：有一个我能想到的解决方案，但它感觉不是很优雅：通过字符偏移可以做到这一点，比如说我知道我会向后端发送0到1000个HTML字符首先，替换它们，然后字符1000 + x到2000 + x，其中x是原始HTML和更新HTML之间的长度差异？

Answer 1

PS：有一个我能想到的解决方案，但它感觉不是很优雅：通过字符偏移可以做到这一点，比如说我知道我会向后端发送0到1000个HTML字符首先，替换它们，然后字符1000 + x到2000 + x，其中x是原始HTML和更新HTML之间的长度差异？

从技术角度来看，完成这项工作是完全可以的，但是在未来的代码审查中，如果能够毫无错误地设置它并且在未来的代码审查中获得一些犀利的眉毛，那将是令人头痛的问题。

根据您的需求有多挑选，只发送当前可见的内容相对容易。你可以尝试类似的东西：

$('body:visible').each(function() {
    // Send $(this).html() to server
    console.log('HTML The user can see: '+$(this).html())
})

虽然这可能不是您正在寻找的，但您会遇到知道触发该功能的时间和频率的问题。

更新：扩大使这个更强大的想法更强大

获取当前HTML和未来的HTML

这更棘手，并且根据您愿意更改基础设施的程度而变化很容易。

1）抓住并隔离当前元素

如果您创建了所有div（即将<img src="test.jpg" />变为<div style="background-image:url(test.jpg)"></div>），则可以更轻松地隔离每个可见和不可见的div：

var visibleHTML = '';
var invisibleHTML = '';
$('body div').each(function() {
    if ($(this).is(':visible')) {
        visibleHTML += $(this).html()
    } else {
        invisibleHTML += $(this).html()
    }
})
// Send visibleHTML and invisibleHTML separately to server

这种方法的问题是它可能会忽略脚本标记和.is(':visible')未检测到的其他重要HTML，其中技术上可能有助于“可见”体验，以及在循环结束时，visibleHTML和invisibleHTML可能全都不同步。

2）完全重组页面

这可能是一次重写的痛苦，但会使更加模块化，易于丢失并逐位分解。每个html“chunk”都是页面加载时的JS字符串。

var upperHTML =
'<div id="header">' +
    '<div id="header-content">This is part of the header</div>' +
    '<div id="header-content2">This is part of the header</div>' +
'</div>';

var middleHTML = 
'<div id="main-content">' +
    '<div id="inner-content">' +
        '<p>Hi, I\'m the main</p>' +
    '</div>'
'</div>';

var lowerHTML = 
'<div id="footer">' +
    '<div id="footer-content">' +
        '<p>What an awesome footer!</p>' +
    '</div>'
'</div>';

显然你的字符串看起来比这长得多，并且从HTML文件转换会很繁琐，因为JS不能容忍字符串中的新行。（参见：unterminated string literal）如果您想要像我上面所做的那样想象新的行，这会强制您将字符串与'' + '' +连接起来。

将它分成更多的块也是明智的，而不是像我一样将其分成尽可能模块化和隔离的东西 - 当然不会给你带来太多麻烦。

您还必须添加\以逃避HTML本身的单引号。

我实际上多次使用过这种方法，起初它有点笨拙，但是它可以提供相当强大的开发界面，因为你可以随时随地抓取并放置html（包括将它发送到网络服务器，在你的情况下）或者在文档$('#target-div').html(middleHTML);中你总是知道upperHTML会是什么样的，隐藏，显示，移动或者将它发送到某个地方是非常快的，因为它已经作为字符串缓存到内存中。

3）查看服务器缓存或不同的数据格式

我不确定您的服务器在使用这些HTML时做了什么，但实际上，如果服务器无法快速处理HTML，则可能存在更大的设计问题。根据服务器需要的html for ，提出了一些重要问题：

此服务器不仅可以接收JSON数据，还可以根据传递的有限变量重新创建HTML本身吗？
每个用户的HTML都非常相似吗？服务器可以不缓存它吗？

这听起来像是一个非常有用的用例，这就是为什么我正在抓住稻草。

jQuery：以块的形式处理HTML

1 个答案:

获取当前HTML和未来的HTML

1）抓住并隔离当前元素

2）完全重组页面

3）查看服务器缓存或不同的数据格式