Firefox DIV innerHTML can't reach dynamically added Javascript functions

**gnanaswaroop** · 10-01-2010 03:56 AM

Hi experts,

I have a weird case to program to and I was wondering if there is an existing solution to get the case working.

I need to be able to display dynamic HTML inside a DIV (can't tell what the html nodes would be) - i.e needs to be flexible. The HTML that goes inside the DIV would have its own Javascript too. I was able to get this code snippet working on Microsoft IE7+, was wondering why the same won't work on firefox.

HTML Code:

<html>
	<head>
		<script>
			/* the input type = hidden is necessary or the JS won't be accessible */
			/* script defer tag is also necessary */
			function insertHTMLOnButtonPress() {
				var s = "<html><input type='hidden' id='dummyHidden'/><head><script defer='defer'>function dynamicallyInsertedFunction() { alert('Successfully called - dynamicallyInsertedFunction'); } </sc" + "ript></head><body><input type='text' value='Hello World'/><input type='button' onClick='dynamicallyInsertedFunction();' value='Call Dynamically Inserted Method'/></body></html>";
				/* Clearing out innerHTML is also required to flush the innerHTML so that repeated attempts - i.e new HTML/JS should work */
				document.getElementById('wholeBody').innerHTML = '';
				document.getElementById('wholeBody').innerHTML = s;
			}
		</script>
	</head>
	<body>
		**********************************<br/>
		<!-- Don't close the div inline, causes some problem and replaces the buttons too -->
		<div id="wholeBody"></div>
		**********************************<br/>
		<input type="button" onClick="insertHTMLOnButtonPress();" value="Insert some dynamic html"/>
		<input type="button" onClick="dynamicallyInsertedFunction();" value="Call Dynamically Inserted Method"/>
	</body>
</html>

I have tried a couple of things like

Remove the script defer tag
Removing the dummy input element added which is required for Desktop IE
Removing the empty innerHTML step before replacing it

But none of these appear to work for Mozilla firefox. I am also looking for a similar behavior on Android's default webbrowser (WebView to be more specific

) -- Doesn't work there too.

**gnanaswaroop** · 10-01-2010 05:07 AM

Cross Posted - http://groups.google.com/group/andro...24fd8fda09089a

I have experimented out a little with iFrame, but the problem ends up with scope issues i.e the Outer body's javascript can't call the iFrame's javascript or for the iFrame's JS to call outerbody's JS it will have to use parent.someJSFunction().

This isn't similar to how IE works when used with DIV.innerHTML. The modified code is

HTML Code:

<html>
	<head>
		<script>
			/* the input type = hidden is necessary or the JS won't be accessible */
			/* script defer tag is also necessary */
			function insertHTMLOnButtonPress() {
			try {
				var s = "<html><input type='hidden' id='dummyHidden'/><head><script defer='defer'>function dynamicallyInsertedFunction() { alert('Successfully called - dynamicallyInsertedFunction'); } </sc" + "ript></head><body><input type='text' value='Hello World'/><input type='button' onClick='dynamicallyInsertedFunction();' value='Call Dynamically Inserted Method'/></body></html>";
				var x = document.getElementById('test');
				var y=(x.contentWindow || x.contentDocument);
				if (y.document)y=y.document;

				y.write(s);
				} catch(ex) {
					alert(ex.name);
				}
			}
		</script>
	</head>
	<body>
		**********************************<br/>
		<!-- Don't close the div inline, causes some problem and replaces the buttons too -->
		<iframe id="test" name="test">hello world</iframe>
		**********************************<br/>
		<input type="button" onClick="insertHTMLOnButtonPress();" value="Insert some dynamic html"/>
		<input type="button" onClick="dynamicallyInsertedFunction();" value="Call Dynamically Inserted Method"/>
	</body>
</html>

Thread: Firefox DIV innerHTML can't reach dynamically added Javascript functions

Thread Tools

Display

Firefox DIV innerHTML can't reach dynamically added Javascript functions

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions