www.webdeveloper.com
Results 1 to 2 of 2

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

Hybrid View

  1. #1
    Join Date
    May 2010
    Posts
    2

    Exclamation Firefox DIV innerHTML can't reach dynamically added Javascript functions

    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.

  2. #2
    Join Date
    May 2010
    Posts
    2
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles