javascript – jQuery与doctype declation之前输出的文本进行交互

2019年7月28日 210次阅读

我有一个
PHP应用程序正在输出
PHP通知.这是在其他任何内容之前简单地在浏览器中弹出的文本,包括DOCTYPE声明.

    <br />
    <b>Notice</b>:  Undefined property: bla bla blap</b> on line <b>16</b><br />
    <!DOCTYPE html>
...regular web page

有没有办法使用jQuery与此文本进行交互？它在浏览器中显示为第一件事.你如何选择上面的东西<！DOCTYPE html>在jQuery？

最佳答案 您可以使用$(‘body’).contents()访问元素,因为浏览器会将它们解释为正文的元素.当浏览器在doctype声明之前看到文本时,它会将该文本和头部内容转换为正文,因为它是尝试构建可行DOM的方式,即使html无效.

由于浏览器重新组织了内容,因此您无法猜测头部的第一个元素应该是什么.此脚本允许您设置应该是头部的第一个元素的元素.然后,脚本将在您设置的元素之前访问元素,并为您提供有关元素是文本节点还是DOM元素的信息.

您必须使用vanilla js与文本节点进行交互,但您可以将jQuery用于其他节点.

// the script needs to know what should have been the first element in the head
const firstElementInHead = $( 'title' );
// remove all nodes prior to the intended content
$('body').contents().each( function() {
    if ( $(this).index() < firstElementInHead.index() ) {
        $(this).remove();
    }
});

<br />
<b>Notice</b>: Undefined property: bla bla blap on line <b>16</b><br />
<!doctype html>

<html lang="en">

<head>
  <title>The Broken Page</title>
  <meta charset="utf-8">


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
    // the script needs to know what should have been the first element in the head
    const firstElementInHead = $('title');
    // log the nodes that apear prior to the intended content
    $('body').contents().each(function() {
      if ($(this).index() < firstElementInHead.index()) {
        if (this.nodeType == Node.TEXT_NODE) {
          console.log('This is a text node. You can change it by setting this.nodeValue, remove it by calling this.remove(), or other vanilla JS operations.');
          console.log(this);
        } else {
          console.log('This is a DOM element. You can interact with it using jQuery the same way you interact with any normal DOM element.');
          console.log(this);
        }
      }
    });
  </script>
</head>

<body style="padding:0; margin:0;">
  <p style="padding:0; margin:0; background:red;">Test</p>
</body>

</html>
点赞