在 Gutenberg 下使用 jQuery 从 html 文件加载 div

Question

我知道有人问了很多类似的问题，我已经搜索了他们，看看我是否能找到解决这个非常简单的问题的方法。您可能已经猜到了，我是 js 的极端初学者，所以如果这是一个非常愚蠢的问题，请原谅我。

在我的 wordpress 索引页面上，我试图从一个单独的 html 文件（也位于我的服务器上）加载一个 div 内的 iframe。我这样做本质上是为了确保嵌入的 spotify 播放列表不是谷歌在抓取我的网站时索引的第一件事（现在，它已决定该播放列表上的歌曲列表更适合我的网站的描述比元描述或网站上的任何其他文本。）我希望通过使用 window.load 从外部 html 加载 iframe，它只会在过程结束时被抓取，因此将由谷歌重新确定优先级（额外的好处是，Spotify 的任何缓慢加载时间只会在页面的其余部分加载后发生）。

使用我在 stackoverflow 上找到的方法，我创建了一个 html 文件，其中只有 spotify 生成的 iframe 代码：

<iframe src="https://open.spotify.com/embed/playlist/2JVOQhDOZlNSRGw73rl3J9?theme=0" width="100%" height="260" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

然后，在我的 wordpress 索引的头部，我包含了以下 javascript：

<script>
  
jQuery(window).load(function () {
      $('#spembed').load("http://www.palmsout.net/spotifyindex.html")}
        });
  });
</script>

最后，我在首页创建了一个空的 div，id 为“spembed”

<div id="spembed"></div>

我希望这种方法可以用 spotifyindex.html 中的 iframe 替换 div 中的空内容——但它似乎不起作用。 div 仍然呈现空白，并且我没有看到任何与我正在使用的代码相关的控制台错误（不过，我还是一个真正的初学者，所以我可能会误解我在控制台中看到的内容）。我确定我在这里遗漏了一些非常基本的东西，但我无法弄清楚它是什么。

如果有人能帮助我，我将不胜感激。如果有人对这可能如何帮助我解决我的谷歌搜索问题（或更好的解决方案等）有任何想法，我会全力以赴。

谢谢！

ps。我已经使用以下代码将 jquery 排入队列，但我似乎无法直接回答我是否真的需要这样做。

function theme_scripts() {
  wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'theme_scripts');

Answer 1

如果您在脚本中使用 jQuery，则需要将其注册为依赖项。但是，在大多数情况下，我相信它已经被其他东西包含了。 其次，我将该代码放在一个单独的 js 文件中，然后像这样加载它：

add_action( 'wp_enqueue_scripts' , function () {
    wp_enqueue_script( 'spotify_embed' , 'path/to/spotifiy-embed.js' , array( 'jquery' ) );
} );

在 jQuery 部分尝试

jQuery( document ).ready( function () {
    jQuery( '#spembed' ).load( 'http://www.palmsout.net/spotifyindex.html' );
} );