Question

I am relatively new to front-end development with HTML5/JavaScript.

I guess I should’ve researched this before. I needed to create an iframe that will include a javascript countdown timer and a javascript text effect.

The iframe renders OK but it doesn’t the timer isn’t showing countdown in real-time and the text effect is not rendering as well.

I wanted this to be embeddable similar to the way you embed a flash video or something…

Please point me in the right direction.

Answer 1

Supposing you have an iFrame like:

<iframe src="someSource" id="frameID"></iframe>

And your script is in an external myScripts.js file you may want to append a new script to the of the iFrame… something like:

$("#frameID").contents().find("head").append("<script type='text/javascript' src='resources/script/script.js'>");

Edit:
If you have a function functionToCall() you want to call inside the iframe (as opposed to embedding an external file), you can do something like this:

  document.getElementById('frameID').contentWindow.functionToCall();