我在使用 jQuery 动态加载的 HTML div 中显示图像时遇到问题 .load() 。我当前使用的 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函数的属性正在使用 <?php the_permalink(); ?>来自WordPress。各个帖子加载正确，但带有 .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，以使用正确的元素动态加载帖子类型内容 block 。我已经更新了我的.load();函数来实现 Alexander O'Mara 建议的修复。
图像正在通过 .load(); 加载.
最佳答案
根据您的描述，您正在尝试将整个 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>关于javascript - jQuery .load() 函数从 WordPress 帖子中删除 <img> 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59414508/