jQuery .load() 函数从 WordPress 帖子中删除 <img> 标签答案

【问题标题】：jQuery .load() function stripping out <img> tags from WordPress postsjQuery .load() 函数从 WordPress 帖子中删除 <img> 标签
【发布时间】：2019-12-19 17:39:08
【问题描述】：

我在使用 jQuery .load() 动态加载的 HTML div 中显示图像时遇到问题。我目前使用的jQuery函数如下：

jQuery(document).ready(function(e) {
    // Past sendout nav trigger function
    e( ".btn--nav-trigger" ).click(function() {
        e( this ).toggleClass( "btn--nav-trigger-active" );
        e( ".sendout__list" ).toggleClass( "sendout__list--open" );
    });

     // AJAX .load function for sendout post content
    e( ".sendout-link" ).click(function() {     
        e( ".btn--nav-trigger" ).toggleClass( "btn--nav-trigger-active" );
        e( ".sendout__list" ).toggleClass( "sendout__list--open" );
        var post_url = e( this ).attr( "href" );
        e( "#sendout-container" ).html( '<div class="loading"></div>' );
        e( "#sendout-container" ).load( post_url + "#sendout-content", function( response, status, xhr ) {
            if ( status == "error" ) {
                var msg = "Sorry but there was an error: ";
                e( "#sendout-container" ).html( msg + xhr.status + " " + xhr.statusText );
            }
        });
        return false;
    });
});

该函数成功地从选定的 WordPress 帖子加载文本和 YouTube iframe，但它总是剥离图像。

函数中的href 属性使用WordPress 中的<?php the_permalink(); ?>。个别帖子正确加载，但 .load() 函数正在剥离完整的 <img> 标签。

更新

看起来包含图像的整个 div 也被剥离了。不知道为什么会这样。我已经包含了在使用下面的.load() 函数时被完全剥离的 WordPress HTML/PHP 代码。此代码使用 WordPress/PHP 正确显示。

<?php if(get_field( 'meme_one_image' )): ?>
<div class="sendout__row sendout--meme">
    <?php 
    $memeOneImage = get_field( 'meme_one_image' );
    if( !empty($memeOneImage) ): ?>
        <img src="<?php echo $memeOneImage['url']; ?>" alt="<?php echo $memeOneImage['alt']; ?>" />
        <div class="sendout--meme_share">
            <h4>Share this meme</h4>
            <a href="http://www.facebook.com/sharer/sharer.php?u=<?php echo $memeOneImage['url']; ?>" class="button">Facebook</a>
            <a href="http://twitter.com/intent/tweet?text=<?php echo $memeOneImage['title'] .' : '. $memeOneImage['url']; ?>" class="button">Twitter</a>
            <button class="button copy-button" data-clipboard-text="<?php echo $memeOneImage['url']; ?>">Copy URL</button>
        </div>
    <?php endif; ?>
</div>
<?php endif; ?>

更新二

我已经修复了我的主题文件和 JavaScript 以使用正确的元素来动态加载帖子类型的内容块。我更新了我的 .load(); 函数以实施 Alexander O'Mara 建议的修复。

图片正在通过.load();加载。

【问题讨论】：

没有理由会发生这种情况。您如何确定图像不存在 - 因为它们没有在页面上显示为图像，或者您是否确实验证了输出中不存在 img 标签？
看看这是否回答了您听起来相似的问题 - stackoverflow.com/questions/6036870/…
@Utkanos 我已经查看了呈现的页面和源代码，在这两种情况下，完整的<img> 都被从 jQuery 加载的内容中删除。如果我查看由 WordPress/PHP 加载的页面，图像不会被剥离。
万一您不知道，WP 网站有一个 REST API，您可以利用它来获取您的部分内容。

标签： javascript jquery ajax image

【解决方案1】：

根据您的描述，您正试图将整个 HTML 文档加载到另一个 HTML 文档中，这真的很奇怪，而且很可能容易出错。

jQuery.load method 用于加载 HTML 内容并将其放入另一个元素中。通常，该 HTML 内容将只包含您想要的内容，而不是带有 <html>、<head> 和 <body> 标记的完整文档。

作为一种解决方案，您可能希望使用jQuery.load 的fragment loading feature 来指定页面中要使用的元素的ID，而不是整个文档。

示例：

e( "#sendout-container" ).load( post_url + ' #some-element-id', function( response, status, xhr ) {

您也可以使用jQuery.ajax 加载 HTML 文档并提取您要使用的元素的 HTML。

示例：

$.ajax({
    // Example URL.
    url: 'https://cors-anywhere.herokuapp.com/https://example.com/'
}).done(function(data) {
    // Parse the HTML document.
    var doc = (new DOMParser()).parseFromString(data, 'text/html');

    // Select some content from the document.
    var body = $(doc).find('body').html();

    // Put that content in an element.
    $('#content').html(body);
});

#content {
  border: solid black 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content">
Loading...
</div>

【讨论】：

我实现了片段加载功能，但图像仍在被剥离。我让个人从 WordPress 模板部分发送模板加载。模板部分只包括必要的 HTML 和 WP 查询。你有将.load() 换成.ajax 的技巧吗？
@MikeHermary 我添加了一个示例，它使用.ajax 加载html，将其解析为新文档，并从中选择一些内容。
感谢分享 Ajax 代码。我已经尝试实现代码，但同样的问题仍然存在。由于某种原因，图像被剥离。你知道 WordPress 是否与通过 JavaScript 加载的图像有任何冲突吗？
@MikeHermary 据我所知，肯定有其他事情发生。我会仔细检查图像标签是否在 AJAX 响应中。
我想我已经解决了这个问题。这个问题似乎与主题文件结构以及我如何通过 JavaScript 加载内容有关。使用.load() 在这个实现中起作用。感谢您的帮助。