Results 1 to 7 of 7
  1. #1
    Member
    Join Date
    Apr 2008
    Location
    Amersfoort
    Posts
    3

    Google Visualization API - Internet Explorer 7 - Access is denied.

    Hi,

    I'm trying to use both the Lightstream JavaScript client AND Google Visualization API om one HTML page, which uses the StockDemo adapter that comes with the Lightstreamer distribution. The following demo page should show a bar chart with data from the StockDemo adapter.

    The page works fine on Google Chrome and FireFox 3, but gives 'Access is denied.' on IE7.
    If the Google Visualization part is removed from the page, the Lightstreamer part works fine also on IE7.
    If the Lightstreamer part is removed, the Google part works fine also in IE7.

    Question is, is there a way to use both Lightstream JavaScript client AND the Google Visualization API on one page?

    Here is the source of the page:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head runat="server">
    		<title>Lightstreamer Demo</title>
    		<script type="text/javascript" language="JavaScript" src="content/js/LS/lscommons.js"></script>
    		<script type="text/javascript" language="JavaScript" src="content/js/LS/lspushpage.js"></script>
    		<script src="http://www.google.com/jsapi?key=ABQIAAAABMEsCWm7ArCHaJ7EfNHyjRRfA77vZl8sU-2EUdQXl-flLnD-IBS9DtkAJQKD_YN4JmjL49vaqBS4eQ" type="text/javascript"></script>
    	</head>
    	<body>
    		<div id="chart_div"></div>
    		<div id="container"></div>
    
    		<script type="text/javascript">
    			
    			function drawChart(chart, data) {
    				chart.draw(data, {widthx: 1600, height: 600, is3D: true, title: 'Stock data'});
    			}
    
    			function initApp() {
    				var page = new PushPage();
    				page.context.setDomain("woutm6300.nl");
    				page.onEngineCreation = function(engine) {
    					engine.connection.setLSHost("push.woutm6300.nl");
    					engine.connection.setLSPort("8081");
    					engine.connection.setAdapterName("STOCKLISTDEMO");
    					engine.changeStatus("STREAMING");
    				}
    				page.bind();
    				page.createEngine("Lightstreamer.Test", "content/js/LS", "SHARE_SESSION");
    
    				var schema = "last_price time pct_change bid_quantity bid ask ask_quantity min max ref_price open_price stock_name item_status";
    
    				var	groupArray = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30);
    				var groupString = "";
    				var st = 1;
    				for (st = 1; st <= groupArray.length; st++) {
    					groupString += "item" + groupArray[st-1] + " ";
    				}
    
    				var data = new google.visualization.DataTable();
    				data.addColumn('string', 'Stockname');
    				data.addColumn('number', 'Last price');
    				data.addColumn('number', 'Min price');
    				data.addColumn('number', 'Max price');
    				data.addRows(groupArray.length);
    
    				var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    				drawChart(chart, data);
    				var pushtable = new NonVisualTable(groupString,schema,"MERGE");
    
    				pushtable.onItemUpdate = function(itemPos, updateInfo, itemName) {
    					if (updateInfo.isValueChanged(12)) {
    						var stock_name = updateInfo.getNewValue(12);// By field index because by field name 'stock_name' does NOT work (returns null)
    						var last_price = parseFloat(updateInfo.getNewValue(1));
    						var min_price = parseFloat(updateInfo.getNewValue(8));
    						var max_price = parseFloat(updateInfo.getNewValue(9));
    						document.getElementById("container").innerHTML += 
    							  "Item update: "
    							+   "itemPos=" + itemPos
    							+ ", stock_name=" + stock_name
    							+ ", last_price=" + last_price
    							+ ", itemName=" + itemName
    							+ "<br/>";
    
    						data.setValue(itemPos - 1, 0, stock_name);
    						data.setValue(itemPos - 1, 1, last_price);
    						data.setValue(itemPos - 1, 2, min_price);
    						data.setValue(itemPos - 1, 3, max_price);
    
    						drawChart(chart, data);
    					}
    				}
    
    				page.addTable(pushtable, "1");
    			}
    
    			google.load("visualization", "1", {
    				packages:["barchart"]
    			});
    
    			google.setOnLoadCallback(function() {
    				// When google is loaded, initialize the rest of the application.
    				initApp();
    			});
    		</script>
    	</body>
    </html>

  2. #2
    Administrator
    Join Date
    Jul 2006
    Location
    Milan
    Posts
    1,090
    Note that the Lightstreamer part sets the document.domain property, which is often the cause of "Access is denied" issues (and of browser-specific issues as well).

    If your html pages are static, you could ascertain this by hosting the pages on Lightstreamer Server and using setDomain(null) and see if the problem disappears (of course, this could not be your final solution).

    I also notice that the domain setting is performed after the initialization of the Google part, which may introduce side effects. To reduce complexity, you could try moving the first part of Lightstreamer initialization (until "page.bind()") before the Google initialization.

  3. #3
    Member
    Join Date
    Apr 2008
    Location
    Amersfoort
    Posts
    3
    Hi Dario,

    I tried what you suggested regarding Lightstreamer initialization, but that didn't solve the problem.
    As you already stated, hosting the pages on Lightstreamer server, is no option. The web application is based on ASP.NET and hosted in IIS.

    Now I ripped all overhead from the page, keeping the part where the problem is:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head runat="server">
    		<title>Lightstreamer Demo</title>
    <!--
    		//Tried this, but doesn't help:
    		
    		<script type="text/javascript">
    			document.domain = 'woutm6300.nl';
    		</script>
    -->
    		<script type="text/javascript" language="JavaScript" src="content/js/LS/lscommons.js"></script>
    		<script type="text/javascript" language="JavaScript" src="content/js/LS/lspushpage.js"></script>
    		<script src="http://www.google.com/jsapi?key=ABQIAAAABMEsCWm7ArCHaJ7EfNHyjRRfA77vZl8sU-2EUdQXl-flLnD-IBS9DtkAJQKD_YN4JmjL49vaqBS4eQ" type="text/javascript"></script>
    	</head>
    	<body>
    		<div id="chart_div"></div>
    		<div id="container"></div>
    
    		<script type="text/javascript">
    /*
    			// Tried this, but doesn't help:
    			
    			document.domain = 'woutm6300.nl';
    */
    			var page = new PushPage();
    			page.context.setDomain("woutm6300.nl");
    			page.onEngineCreation = function(engine) {
    				engine.connection.setLSHost("push.woutm6300.nl");
    			}
    
    			page.bind();				// By adding this line the Access is denied exception is thrown.
    
    			google.load("visualization", "1", { packages:["barchart"] });
    
    			google.setOnLoadCallback(function() {
    				var data = new google.visualization.DataTable();
    				data.addColumn('string', 'Stockname');
    
    				chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    				chart.draw(data);		// By adding this line the Access is denied exception is thrown.
    			});
    
    		</script>
    	</body>
    </html>
    I have put some comments in the page where I tried things that didn't solve the problem.

    Probably the problem can't be solved due to browser security restrictions. That would mean that we can't use Lightstreamer together with all existing and upcoming Google API's like Google Maps etc.

    Thanks,

    Wout

  4. #4
    Member
    Join Date
    Apr 2008
    Location
    Amersfoort
    Posts
    3

    Solution found

    I found the solution for this problem myself and thought it can probably help others.

    Turns out that the Google Visualization creates an iframe in the chart div. To let the Lightstreamer code communicate with the chart, and thus the iframe, the domain of the document in the iframe needs, also, to be set to the same domain used in the Pushpage.context.setDomain() call. If created a simple function to this: function setVisualizationDomain(el, domain) which needs to be called after the first draw of the visualization/chart. In the first draw(), the iframe is created.

    Here is the updated page:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head runat="server">
    		<title>Lightstreamer Demo</title>
    		<script type="text/javascript" language="JavaScript" src="content/js/LS/lscommons.js"></script>
    		<script type="text/javascript" language="JavaScript" src="content/js/LS/lspushpage.js"></script>
    		<script src="http://www.google.com/jsapi?key=ABQIAAAABMEsCWm7ArCHaJ7EfNHyjRRfA77vZl8sU-2EUdQXl-flLnD-IBS9DtkAJQKD_YN4JmjL49vaqBS4eQ" type="text/javascript"></script>
    		<script type="text/javascript">
    			
    			function drawChart(chart, data, opt) {
    				opt = opt || {};
    				chart.draw(data, {width: 800, height: 400, is3D: true, title: 'Stock data'});
    				if( opt.redrawTime ) {
    					setInterval(function() {
    						drawChart(chart, data, opt);
    					}, opt.redrawTime);
    					delete(opt.redrawTime);
    				}
    			}
    
    			function setVisualizationDomain(el, domain) {
    				var frames = el.getElementsByTagName('iframe');
    				if( frames.length > 0 ) {
    					window.frames[frames[0].id].document.domain = domain;
    				}
    			}
    
    			function initApp() {
    				var schema = "stock_name last_price min max";
    
    				var	groupArray = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
    				var groupString = "";
    				for (var st = 1; st <= groupArray.length; st++) {
    					groupString += "item" + groupArray[st-1] + " ";
    				}
    
    				var data = new google.visualization.DataTable();
    				data.addColumn('string', 'Stockname');
    				data.addColumn('number', 'Last price');
    				data.addColumn('number', 'Min price');
    				data.addColumn('number', 'Max price');
    				data.addRows(groupArray.length);
    
    				var chartEl = document.getElementById('chart_div')
    				var chart = new google.visualization.BarChart(chartEl);
    				drawChart(chart, data, { redrawTime: 1000 });
    				setVisualizationDomain(chartEl, 'woutm6300.nl');
    
    				var page = new PushPage();
    				page.context.setDomain("woutm6300.nl");
    				page.onEngineCreation = function(engine) {
    					engine.connection.setLSHost("push.woutm6300.nl");
    					engine.connection.setLSPort("8081");
    					engine.connection.setAdapterName("DEMO");
    					engine.changeStatus("STREAMING");
    				}
    				page.bind();
    				page.createEngine("LightstreamerTest", "content/js/LS", "SHARE_SESSION");
    
    				var pushtable = new NonVisualTable(groupString,schema,"MERGE");
    				pushtable.setDataAdapter("QUOTE_ADAPTER");
    				pushtable.setSnapshotRequired(true);
    				
    				pushtable.onItemUpdate = function(itemPos, updateInfo, itemName) {
    					data.setValue(itemPos - 1, 0, updateInfo.getNewValue(1));
    					data.setValue(itemPos - 1, 1, parseFloat(updateInfo.getNewValue(2)));
    					data.setValue(itemPos - 1, 2, parseFloat(updateInfo.getNewValue(3)));
    					data.setValue(itemPos - 1, 3, parseFloat(updateInfo.getNewValue(4)));
    				}
    
    				page.addTable(pushtable, "1");
    			}
    
    			google.load("visualization", "1", {
    				packages:["barchart"]
    			});
    
    			google.setOnLoadCallback( initApp );
    		</script>
    	</head>
    	<body>
    		<div id="chart_div" style="width: 800px; height: 400px"></div>
    	</body>
    </html>

  5. #5
    Administrator
    Join Date
    Jul 2006
    Location
    Milan, Italy
    Posts
    521
    Hi Wout,

    Thanks! This is really helpful

    Cheers,

    Alessandro

  6. #6
    Member
    Join Date
    Aug 2010
    Location
    Beverly Hills
    Posts
    1
    Is there any obvious reason this fix wouldn't work with IE 8 too?

    David
    Last edited by DavidMorgan; June 3rd, 2015 at 09:36 PM.
    Cheers,
    David

  7. #7
    Power Member
    Join Date
    Jul 2006
    Location
    Cesano Maderno, Italy
    Posts
    784
    Hi,

    not at all,
    which domain and hosts are you using?

 

 

Similar Threads

  1. Internet Explorer --> domain and opener issue
    By Mone in forum Client SDKs
    Replies: 0
    Last Post: September 21st, 2009, 03:38 PM
  2. Internet Explorer --> Security zones issue
    By Mone in forum Client SDKs
    Replies: 0
    Last Post: July 30th, 2009, 10:09 AM
  3. Replies: 2
    Last Post: October 17th, 2008, 10:22 AM
  4. Internet Explorer --> Proxy issue
    By Mone in forum Client SDKs
    Replies: 0
    Last Post: October 22nd, 2007, 11:20 AM
  5. Running Lightstreamer Web Client : Permission Denied
    By cbradbury in forum Client SDKs
    Replies: 1
    Last Post: February 5th, 2007, 07:32 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT +1. The time now is 02:14 PM.