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');
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' );
} );