PHP saveHTML 函數沒有正確保存 HTML

Question

我一直在嘗試使用 PHP 保存網頁部分的源代碼。 當我提取整個網頁的內容時，源代碼順序被保留，但是當我嘗試使用

$dom = new DOMDocument;
$dom->loadHTML($webpage);
$xpath = new DOMXPath($dom);

$query_tag = "//div[contains(@class, 'class-name')]";
$result = $dom->saveHTML($xpath->query($query_tag)->item(0));

腳本標簽搞砸了。 到目前為止，這是發生此問題的唯一網站。 是否有一些我不知道的saveHTML功能限制？

這是我應該收到的：

<div id="sponsored-category-header" class="page-header sponsored-category-header clear"> <script type="text/javascript">jQuery(document).ready(function($) {
        var cat_head_params = {"sponsor":"SEO PowerSuite","sponsor_logo":"https:\/\/www.searchenginejournal.com\/wp-content\/plugins\/abm-sej\/includes\/category-images\/SPS_128.png","sponsor_text":"<div class=\"taxonomy-description\">Dominate Google local search results with ease! Get your copy of SEO PowerSuite and keep <a rel=\"nofollow\" href=\"http:\/\/sejr.nl\/PowerSuite-2016-5\" onClick=\"__gaTracker('send', 'event', 'Sponsored Category Click Var 1', 'Local Search', 'SEO PowerSuite');\" target=\"_blank\">your local SEO strategy<\/a> up to par.<\/div>","logo_url":"http:\/\/sejr.nl\/PowerSuite-2016-5","ga_labels":["Local Search","SEO PowerSuite"]}            
        $('#sponsored-category-header').append('<div class="sponsored-category-logo"></div>');
                     $('#sponsored-category-header .sponsored-category-logo').append(' <a rel="nofollow" href="'+cat_head_params.logo_url+'" onClick="__gaTracker(\'send\', \'event\', \'Sponsored Category Click Var 1\', \''+cat_head_params.ga_labels[0]+'\', \''+cat_head_params.ga_labels[0]+'\');" target="_blank"><img class="nopin" src="'+cat_head_params.sponsor_logo+'" width="96" height="96" /></a>');
                                   $('#sponsored-category-header').append('<div class="sponsored-category-details"></div>');
         $('#sponsored-category-header .sponsored-category-details').append('<h3 class="page-title sponsored-category-title">'+cat_head_params.sponsor+'</h3>');
         $('#sponsored-category-header .sponsored-category-details').append(cat_head_params.sponsor_text);


});</script> </div>

這是我實際得到的：

<div id="sponsored-category-header" class="page-header sponsored-category-header clear"> <script type="text/javascript">jQuery(document).ready(function($) {
        var cat_head_params = {"sponsor":"SEO PowerSuite","sponsor_logo":"https:\/\/www.searchenginejournal.com\/wp-content\/plugins\/abm-sej\/includes\/category-images\/SPS_128.png","sponsor_text":"<div class=\"taxonomy-description\">Dominate Google local search results with ease! Get your copy of SEO PowerSuite and keep <a rel=\"nofollow\" href=\"http:\/\/sejr.nl\/PowerSuite-2016-5\" onClick=\"__gaTracker('send', 'event', 'Sponsored Category Click Var 1', 'Local Search', 'SEO PowerSuite');\" target=\"_blank\">your local SEO strategy<\/a> up to par.<\/div>","logo_url":"http:\/\/sejr.nl\/PowerSuite-2016-5","ga_labels":["Local Search","SEO PowerSuite"]}            
        $('#sponsored-category-header').append('<div class="sponsored-category-logo"></script>


</div>');
                     $('#sponsored-category-header .sponsored-category-logo').append(' <a rel="nofollow" href="'+cat_head_params.logo_url+'" onclick="__gaTracker(\'send\', \'event\', \'Sponsored Category Click Var 1\', \''+cat_head_params.ga_labels[0]+'\', \''+cat_head_params.ga_labels[0]+'\');" target="_blank"><img class="nopin" src="'+cat_head_params.sponsor_logo+'" width="96" height="96"></a>');
                                   $('#sponsored-category-header').append('<div class="sponsored-category-details"></div>');
         $('#sponsored-category-header .sponsored-category-details').append('<h3 class="page-title sponsored-category-title">'+cat_head_params.sponsor+'</h3>');
         $('#sponsored-category-header .sponsored-category-details').append(cat_head_params.sponsor_text);


    }); </div>

萬一你錯過了，結束script標簽已經上移了幾行。

明確地說，我不是在談論呈現的 HTML。 我說的是我在提出請求后得到的實際源代碼。 任何有關如何解決此問題的幫助將不勝感激。

我知道函數saveHTML導致了這個問題，因為當我通過 PHP 回顯整個頁面時，每個標簽都在正確的位置。

Answer 1

首先，您的代碼應該觸發大量警告，如下所示：

警告：DOMDocument::loadHTML(): htmlParseEntityRef: 期待 ';' 在實體
警告：DOMDocument::loadHTML()：意外的結束標記：實體中的強
警告：DOMDocument::loadHTML()：實體中的標簽標頭無效

這是可以預料到的流行的 HTML（並且此頁面的代碼也不是特別糟糕），但您甚至沒有提到它，這讓我懷疑您的開發框中可能沒有啟用錯誤報告。

此外，該頁面有大量的 JavaScript，而DOMDocument只是一個 HTML 解析器。

有了這個，我們可以清楚地了解正在發生的事情。 由於DOMDocument不是一個成熟的瀏覽器，它不理解 JavaScript 代碼。 這意味着它檢測到<script>標簽，但它不會像 JavaScript 一樣處理它的內容——它只是尋找一個結束標簽，他找到的第一個是這樣的：

$('#sponsored-category-header').append('<div class="sponsored-category-logo"></div>');
                                                                             ^^^^^^

它不知道它是一個 JavaScript 字符串，應該被忽略。 相反，它認為錯誤的標簽被關閉，因此它嘗試修復技術上無效的 HTML 並添加缺少的</script>標簽。

正是出於這個原因， <script>...</script>標簽集傳統上是這樣編寫的：

<script type="text/javascript"><!--
var foo = '<p>Escaped end tag<\/p>';
//--></script>

...所以不知道 JavaScript 的用戶代理可以安全地忽略整個標簽（嘿，它只不過是一個很好的舊 HTML 注釋）。 然而，現在它幾乎被普遍認為是不好的做法，因為“所有瀏覽器都理解 JavaScript”。

最后一點：DOM 擴展可能知道<script>標簽，並且知道不允許在其中包含其他標簽。 這解釋了為什么不考慮內部開始標簽。