Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

153
Views
Loading div from html file using jQuery under Gutenberg

I know many many similar questions have been asked, and I've scoured them to see if I could find a solution to this very simple problem. As you might guess, I'm an extreme beginner to js, so please forgive me if this is a very silly question.

On my wordpress index page, I'm trying to load an iframe within a div from a separate html file (that also lives on my server). I'm essentially doing so to make sure that an embedded spotify playlist is not the first thing indexed by google when it crawls my site (right now, it has decided that the list of songs on that playlist is a more appropriate description for my site than the meta description orany other text on the site.) I'm hoping that by loading the iframe from an external html using window.load, it will only be crawled at the end of the process, and will thus be reprioritized by google (with the added benefit that any slow loading times from spotify will only occur after the rest of the page has loaded).

Using methods I found here on stackoverflow I created an html file that has nothing but the iframe code generated by spotify:

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

Then, in the head of my wordpress index, I've included the following javascript:

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

Finally, I've created an empty div on my front page with the id "spembed"

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

I was hoping this method would replace the empty content in the div with the iframe in spotifyindex.html -- but it doesn't seem to be working. the div still renders blank, and I'm not seeing any console errors that refer to the code I'm using (though again, I'm a true beginner so I may be misunderstand what I'm seeing in the console). I'm sure I'm missing something really elementary here, but I cannot figure out what it is.

If someone would help me, I'd appreciate it. And if anyone has any ideas about how this might help me with my google search problem (or better solutions, etc.), I'm all ears.

Thanks!

ps. I've enqueued jquery already, using the following code, but I can't seem to get a straight answer about whether I actually need to do this.

function theme_scripts() {
  wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'theme_scripts');
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You will need to register jQuery as a dependency if you are using it in a script. However, in most cases I believe it was already included by something else. Second, I'd put that code in a separate js file an load it like this:

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

In the jQuery-part try

jQuery( document ).ready( function () {
    jQuery( '#spembed' ).load( 'http://www.palmsout.net/spotifyindex.html' );
} );
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!