www.webdeveloper.com
Results 1 to 5 of 5

Thread: Safari does not recognise included JS

  1. #1
    Join Date
    Aug 2006
    Posts
    3

    Safari does not recognise included JS

    I am experimenting with the xmlhttpobject. I have a very small setup script that loads other scripts and content through xmlhttpobjects. It works totally fine in Firefox, but Safari is giving me trouble (haven't started debugging in IE).

    After getting the script through the xmlhttpobject, it is inserted in the HEAD with the following code:

    Code:
    var head = document.getElementsByTagName('head')[0];
    var script_el = document.createElement('script');
    script_el.type = 'text/javascript';
    head.appendChild(script_el);
    //script_el.innerHTML = setup_response[response_id]; //doesn't work in safari, aparently you can't set any innerHTML in the header?
    script_el.innerText = setup_response[response_id]; // doesn't work in FF
    This works so far that you can see the script is inserted in the header by walking the DOM tree with the debugging stuff from both browsers.

    Firefox parses this code afterwards (alerts in the attached code fire as soon as it is loaded), but Safari doesn't. If I attach a function to a link on the page, it works in FF, but Safari gives: "TypeError - Object javascript function();(result of expression function) does not allow calls" (with function being the function). It does not see the implemented javascript.

    Weird enough implementing css with the same method works in both browsers:
    Code:
    var head = document.getElementsByTagName('head')[0];
    var style_el = document.createElement('style');
    style_el.type = 'text/css';
    head.appendChild(style_el);
    //style_el.innerHTML = setup_response[response_id];
    style_el.innerText = setup_response[response_id];
    As you can see I also have a problem placing the code in the script tag cross-browser. I think I can solve it by getting the code as a node and appending it to the HEAD tag using appendChild, but I haven't tried it yet. I first want to know if it is possible to use later appended js in Safari.

    I do not have a website, so no place to show it. I will append the .js files as text files so you can check those if necessary.

    So my main question is: Is it possible to include js this way in Safari and have it available in the page?
    second: Does anybody see a solution for placing the js in the head tag?
    Attached Files Attached Files
    Last edited by doxz; 08-15-2006 at 04:00 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    innerText is proprietary and definitely wont work in all browsers. All modern browsers support innerHTML and DOM commands.

  3. #3
    Join Date
    Aug 2006
    Posts
    3
    Quote Originally Posted by felgall
    All modern browsers support innerHTML and DOM commands.
    Not true, at least not fully.

    I made five tests.
    1) Change the title of a page using DOM methods
    2) Add javascript to the HEAD tag using innerHTML
    3) Add javascript to the HEAD tag using appendChild
    4) Add javascript to the BODY using innerHTML
    5) Add javascript to the BODY using appendChild

    Findings:
    - Firefox win & mac support all 5 of my tests
    - Safari supports the first one fully, nr's 2-5 work so far that the js is added. It is not possible to use it though.
    - IE win 6 only supports the first test. All other give errors at the lines where I try to append the js, or when I try to innerHTML it.
    - IE mac 5.2 does something like safari. It does insert the javascript, but it raises an error when I try the test() function.

    The code:
    Code:
    <html>
    <head>
    	<title>Safari Javascript Test</title>
    </head>
    <body>
    	<script type="text/javascript">
    	function changeTitle() {
    		var title = document.getElementsByTagName('title')[0];
    		title.text = 'It works!';
    		alert('endoffunc: changeTitle');
    	}
    	
    	function innerHTMLJStoHead() {
    		var head = document.getElementsByTagName('head')[0];
    		var script_el = document.createElement('script');
    		script_el.type = 'text/javascript';
    		head.appendChild(script_el);
    		var s = document.getElementById('jsdiv');
    		script_el.innerHTML = s.innerHTML;
    		alert('endoffunc: innerHTMLJStoHead');
    	}
    	
    	function innerHTMLJStoBody() {
    		var body = document.getElementsByTagName('body')[0];
    		var script_el = document.createElement('script');
    		script_el.type = 'text/javascript';
    		body.appendChild(script_el);
    		var s = document.getElementById('jsdiv');
    		script_el.innerHTML = s.innerHTML;
    		alert('endoffunc: innerHTMLJStoBody');
    	}
    	
    	function appendJStoHead() {
    		var head = document.getElementsByTagName('head')[0];
    		var script_el = document.createElement('script');
    		script_el.type = 'text/javascript';
    		head.appendChild(script_el);
    		var s = document.getElementById('jsdiv');
    		script_el.appendChild(s.firstChild);
    		alert('endoffunc: appendJStoHead');
    	}
    	
    	function appendJStoBody() {
    		var body = document.getElementsByTagName('body')[0];
    		var script_el = document.createElement('script');
    		script_el.type = 'text/javascript';
    		body.appendChild(script_el);
    		var s = document.getElementById('jsdiv');
    		script_el.appendChild(s.firstChild);
    		alert('endoffunc: appendJStoBody');
    	}
    	
    	function alertHEAD() {
    		var head = document.getElementsByTagName('head')[0];
    		alert(head.innerHTML);
    	}
    	
    
    	</script>
    	This is a page with some Javascript to check browsers behavior on changed Javascript through DOM methods.<br/>
    	<br/>
    	1) First, try to change the document title with JS:
    	<a href="javascript:changeTitle()">Try it</a><br/>
    	You should see that the document title is now <b>It works!</b><br/>
    	<br/>
    	Read out the HEAD tag and see that there is no JS in there yet: <a href="javascript:alertHEAD()">alert HEADtag</a><br />
    	(or use your browsers DOM inspector)<br/>
    	<br/>
    	<br/>
    	2) Now try to add the JS function test() to the HEAD tag using innerHTML:
    	<a href="javascript:innerHTMLJStoHead()">Try it</a><br/>
    	Read out the HEAD tag to see if the JS is there: <a href="javascript:alertHEAD()">alert HEADtag</a><br />
    	Now try if test() works: <a href="javascript:test()">test js alert</a><br/>
    	<br/>
    	<br/>
    	3)Reload the page and try the same by using DOM method appendChild:
    	<a href="javascript:appendJStoHead()">Try it</a><br/>
    	Read out the HEAD tag to see if the JS is there: <a href="javascript:alertHEAD()">alert HEADtag</a><br />
    	Now try if test() works: <a href="javascript:test()">test js alert</a><br/>
    	<br/>
    	<br/>
    	4)Reload the page and try the putting the JS in a newly created script tag in the body using innerHTML:
    	<a href="javascript:innerHTMLJStoBody()">Try it</a><br/>
    	Read out the BODY tag with your DOM inspector to see if the JS is there (Alert becomes really messy...)<br/>
    	Now try if test() works: <a href="javascript:test()">test js alert</a><br/>
    	<br/>
    	<br/>
    	5)Reload the page and try the same by using DOM method appendChild:
    	<a href="javascript:appendJStoBody()">Try it</a><br/>
    	Read out the BODY tag with your DOM inspector again, or just test it.<br/>
    	Now try if test() works: <a href="javascript:test()">test js alert</a><br/>
    	<br/>
    	<br/>
    	The DIV below contains the test() function<br/>
    	<div id="jsdiv">function test(){alert('It Works!');}</div>
    	
    </body>
    
    </html>
    I also attach the html file (as .txt), so you can download it and open it in your browser to try for yourself.


    I see now that I don't need innerTEXT, so that is not a problem anymore. But I still want to be able to include some js on a page and use it. Anybody that sees a solution?
    Attached Files Attached Files

  4. #4
    Join Date
    Aug 2006
    Posts
    3
    Little bump.
    I am giving this project another go. Anybody suggestions on how to do this?

  5. #5
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    I wrote this rather quick but it looks cross-browser to me.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html dir="ltr" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-style-type" content="text/css">
    <meta http-equiv="content-script-type" content="text/javascript">
    <title>Creating Internal Scripts Dynamically</title>
    <style type="text/css">
    body{
    background:white;color:black;
    font-family:"Lucida Console", "Courier New", Courier, SimSun, Fixedsys;
    font-size:.7em;
    }
    </style>
    <script type="text/javascript">
    function createScriptNode(str){
    var e=document.createElement("script");
    e.type = "text/javascript";
    if("text" in e)e.text=str;
    else if("textContent" in e)e.textContent=str;
    else if("innerHTML" in e)e.innerHTML=str;
    else e.appendChild(document.createTextNode(str));
    return e;
    }
    
    var head = document.getElementsByTagName('head')[0];
    var script_el = createScriptNode("alert('test worked')");
    head.appendChild(script_el);
    </script>
    </head>
    <body>
    <p>If this worked, you should haved recieved an alert.</p>
    </body>
    </html>
    Last edited by Ultimater; 01-08-2007 at 09:39 PM.

Thread Information

Users Browsing this Thread

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

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