Browser Popup Focus Behaviour on Safari (on Mac)
Hi Guys,
I have an interesting scenario in Safari (only on Mac) where we have a page which has it's content updated from Lighstreamer and links to a popup page (like a media player) which streams music as well as display the same text content.
We have noticed in Safari that when the popup is opened from the parent window - the popup page loses focus and the parent page comes into focus.
Both the popup and parent page contain lightstreamer javascript (to create a connection to the Lightstreamer engine and receive updates etc).
This only seems to happen on Safari on a Mac, whereas in IE, Firefox, Chrome and Safari (on Windows) work as expected - the popup stays in focus.
If it helps this is the html + javascript for the link to the popup:
Code:
<a href="http://www.test.com.au/player" onclick="window.open('http://www.test.com.au/player', '_blank', 'width=500,height=500,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'); return false;">LISTEN</a>
We've also tried this variation to link to the popup:
Code:
<a href="http://www.test.com.au/player" onclick="openPlayer('http://www.test.com.au/player', '500', '500'); return false;">lISTEN</a>
<script type="text/javascript">
function openPlayer(url, width, height) {
if (url && width && height) {
var playerWindow = window.open(url,'_blank','width=' + width + ',height=' + height + ',toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');
if (window.focus) {
playerWindow.focus();
}
}
}
</script>
The lighstreamer javascript is (which is on both pages):
Code:
<script type="text/javascript" src="http://www.test.com.au/LS/lscommons.js"></script>
<script type="text/javascript" src="http://www.test.com.au/LS/lspushpage.js"></script>
<script type="text/javascript" src="http://www.test.com.au/js/json2.js"></script>
<script type="text/javascript">
//set up the group and schema
var group = ["TEST"];
var schema = ["NowPlaying","UpComing","LastPlayed"];
var tableList = [];
//create the adapter tables
tableList[0] = createTable("TEST_ADAPTER_1");
tableList[1] = createTable("TEST_ADAPTER_2");
//create the page
var page = new PushPage();
page.context.setDomain("test.com.au");
//create the engine
page.onEngineCreation = function(engine) {
engine.context.setDebugAlertsOnClientError(false);
engine.connection.setLSHost("streamer.test.com.au");
engine.connection.setLSPort(80);
engine.connection.setAdapterName("TEST");
engine.changeStatus("STREAMING");
}
page.bind();
page.createEngine("TestApp", "http://www.test.com.au/LS", "SHARE_SESSION");
function createTable(adapterName) {
var onairTable = new NonVisualTable(group, schema, "MERGE");
onairTable.setSnapshotRequired(true);
onairTable.setCommandLogic(true);
onairTable.setDataAdapter(adapterName);
onairTable.onItemUpdate = updateItem;
return onairTable;
}
function updateItem(item, updateInfo) {
if (updateInfo == null) {
return;
}
//Javascript to update HTML elements...
}
//add the tables to the page
if (tableList && (tableList.length > 0)) {
for (var i=0; i < tableList.length; i++) {
var tableName = "onair-" + i;
page.addTable(tableList[i], tableName);
}
}
</script>
Any help would be much appreciated.
Many Thanks,
C
