Thanks Stephen, that got my thoughts focused on the right area before I got off into a hack hell.
An interesting set of problems that was fun to solve.
There seems to be a scope thing or something going on as the code in the iframe content needs to reference elements from the containing page’s viewpoint. (where the jQuery lives)
Because the iframe content was loaded before the the jQuery was inserted into it, I needed to copy it, remove it, then replace it with a modified version of it so that jQuery could use it
Not the best what with hard-coded indexes and a dubious regex pattern, but the example files work
iframe-take2.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Iframe Take2</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">
</style>
<script type="text/javascript">
// script needed before the DOM is loaded here
</script>
<script src="jquery-1.11.3.min.js"></script>
</head>
<body>
<h1>Iframe Take2</h1>
<iframe id="test_iframe" src="jquery-defined-test.html" width="1100" height="500"></iframe>
<script type="text/javascript">
// script that needs the DOM to be loaded here
function modify_iframe_script(script_str) {
var regex_pattern = /\$\(/g;
var new_string = script_str.replace(regex_pattern, '$("#test_iframe").contents().find(');
return new_string;
}
function init() {
var my_iframe = parent.document.getElementById("test_iframe");
var iframe_head = my_iframe.contentWindow.document.getElementsByTagName("head")[0];
var iframe_body = my_iframe.contentWindow.document.getElementsByTagName("body")[0];
var iframe_script = my_iframe.contentWindow.document.getElementsByTagName("script")[1];
var assign_script_elem = document.createElement('script');
var script_elem = document.createElement('script');
var iframe_script_markup = iframe_script.innerHTML;
iframe_body.removeChild(iframe_script);
assign_script_elem.innerHTML = 'if (typeof window.parent.top.$ == "function"){ var $ = window.parent.top.$; alert("YAY"); } else { alert("BAH"); }';
script_elem.innerHTML = modify_iframe_script(iframe_script_markup);
iframe_head.appendChild(assign_script_elem);
iframe_body.appendChild(script_elem);
}
window.onload = function() {
init();
};
</script>
</body>
</html>
jquery-defined-test.html (in honor of how often I saw “undefined” lol)
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>jQuery Defined Test</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">
</style>
<script type="text/javascript">
// script needed before the DOM is loaded here
</script>
</head>
<body>
<h1>jQuery Defined Test</h1>
<div>
<p id="cat_ipsum">Hide head under blanket so no one can see ears back wide eyed and thug cat chase dog then run away, or stand in front of the computer screen, stretch knock over christmas tree. Tuxedo cats always looking dapper all of a sudden cat goes crazy. Immediately regret falling into bathtub human give me attention meow. Sleep on dog bed, force dog to sleep on floor jump around on couch, meow constantly until given food, hack up furballs for spread kitty litter all over house or white cat sleeps on a black shirt so curl into a furry donut for play time. Lounge in doorway chase mice cat is love, cat is life so make meme, make cute face or chase after silly colored fish toys around the house. Claw drapes leave dead animals as gifts scratch the furniture but knock dish off table head butt cant eat out of my own dish immediately regret falling into bathtub for cough furball but sleep nap. Mark territory ears back wide eyed or stretch, thinking longingly about tuna brine but make meme, make cute face. Love to play with owner's hair tie stare at the wall, play with food and get confused by dust chew foot where is my slave? I'm getting hungry purr while eating, and rub face on owner. Chew on cable chirp at birds, meow all night having their mate disturbing sleeping humans for cat is love, cat is life leave hair everywhere. Run in circles tuxedo cats always looking dapper so human give me attention meow. If it smells like fish eat as much as you wish scratch leg; meow for can opener to feed me. Ignore the squirrels, you'll never catch them anyway jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed chase laser wake up human for food at 4am so play time, or stand in front of the computer screen throwup on your pillow.</p>
</div>
<script type="text/javascript">
$( "#cat_ipsum" ).on( "mouseover", function() {
$( this ).css( "color", "red" );
});
</script>
</body>
</html>