-1

I have a piece of HTML that contains some JavaScript 

<div id=’abc’> Hello World</div><script> myfunction() { alert (“hi”);}</script>

This is loaded/injected into a target div that is in an iFrame, via an Ajax call that gets the above html.

<iframe id=’myiFrame’><div id=’targetDiv’></div></iframe>

So I’d have something like

<iframe id=’myiFrame’><div id=’targetDiv’><div id=’abc’> Hello World</div><script> function myfunction() { alert (“hi”);}</script></div></iframe>

This all works

My question is. How do I execute myfunction() at some later point in time. How do I find/reference the embedded JavaScript. I know there are a lot of ifs and buts in this question. Please assume the DOM is ready etc. I will try to execute myfunction() from an already loaded piece of JavaScript

(function(myframework, undefined ) {
    myframework.ButtonClickMethod = function()
{
    //this is the call to the dynamically  loaded method
    //but how do I find / reference this method
    myfunction();
}
}(document.myframework = document.myframework || {} ));

Note: myframework.ButtonClickMethod is called from a button click at a time well after all HTML and script has been loaded.

The problem is also complicated by the fact that I cannot control where the piece of injected HTML/Javascript is placed. It has to go into the target div.

I can use JQuery, but prefer vanilla JavaScript.

Also, please ignore any typos in the question, I typed it in Word, it's put ' in etc. It's the mechanism of how to do it I'm interested in.

Rory
  • 1,442
  • 4
  • 21
  • 38
  • Does your browser support iframes? If it does, then the script will never load. What goes inside the iframe is what renders if the browser does not support iframes – Bango Mar 23 '17 at 10:45
  • Yes, the browser supports iFrames. The problem is referencing the dynamically loaded JS. Is there a way to find the dynamically loaded function in the DOM and execute it ? – Rory Mar 23 '17 at 10:47
  • Supports iframes = does not load iframe child elements – Bango Mar 23 '17 at 10:48

1 Answers1

1

A less than appealing solution would be to use jQuery to select the script tag html contents. Then use something likethis answer to make it into its own function.

Community
  • 1
  • 1
Bango
  • 971
  • 6
  • 18
  • Thanks, yes, that's a possible soution – Rory Mar 23 '17 at 11:02
  • I've upped your answer as it's pointed me in the right direction. document.scripts[] can be parsed – Rory Mar 23 '17 at 11:17
  • I can parse out the method then execute it. I might have to use eval(). But it's internal so there's no security issue. – Rory Mar 23 '17 at 11:24
  • but there's a better way to do what you're doing. If the question had more context we could probably give you a better answer – Bango Mar 23 '17 at 11:27
  • So what is the better solution then ? The context of the question is perfectly explained. – Rory Mar 23 '17 at 15:20
  • How is the script getting dynamically loaded into the iframes? Why are you putting the script in iframes instead of somewhere more conventional? Why can't all the scripts be ready to go on page load instead? Are you literally trying to perform myfunction, which alerts "hi" to the user? Or is this bogus context to make the question easier to explain? – Bango Mar 23 '17 at 18:59
  • @Rory the quality of answers often depends on quality of the question. By better solution, I mean that having unloaded script within an iframe, parsing it out, and loading it as new script from a string is generally a wacky and inefficient way to perform a simple task. There is a better way, which I do not know because the script tag is just there in the iframe, I never see it dynamically loaded or how that can be tweaked, I just have to take your word for it that it's the only way (which I doubt in the first place) – Bango Mar 23 '17 at 19:11