I have this code:
<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='800' height='470' id='Gen5Core' align='middle'><param name='allowScriptAccess' value='always'/><param name='allowFullScreen' value='true'/><param name='movie' value='http://h71016.www7.hp.com/html/interactive/_core/Gen5Core.swf?corePath=http://h71016.www7.hp.com/html/interactive/_core/&serverName=http://h71016.www7.hp.com/html/interactive/p1102w/'/><param name='quality' value='high'/><param name='bgcolor' value='#333333'/><embed src='http://h71016.www7.hp.com/html/interactive/_core/Gen5Core.swf?corePath=http://h71016.www7.hp.com/html/interactive/_core/&serverName=http://h71016.www7.hp.com/html/interactive/p1102w/' quality='high' bgcolor='#333333' width='800' height='470' name='Gen5Core' align='middle' allowScriptAccess='always' allowFullScreen='true' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'></embed></object>
It perfectly works if I put it into the page directly.
But what I want is to embed it on the fly into a popup so I wrote this function:
<script type="text/javascript">
$(document).ready(function () {
$('.newWindow').click(function (event) {
var termWin = window.open('', '', 'width=600,location=0,toolbar=0,resizable=1,height=400,menubar=0,scrollbars=1');
termWin.document.write('<html><head><title>TITLE</title><body><div> <object classid=\'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\' codebase=\'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0\' width=\'800\' height=\'470\' id=\'Gen5Core\' align=\'middle\'><param name=\'allowScriptAccess\' value=\'always\'/><param name=\'allowFullScreen\' value=\'true\'/><param name=\'movie\' value=\'http://h71016.www7.hp.com/html/interactive/_core/Gen5Core.swf?corePath=http://h71016.www7.hp.com/html/interactive/_core/&serverName=http://h71016.www7.hp.com/html/interactive/p1102w/\'/><param name=\'quality\' value=\'high\'/><param name=\'bgcolor\' value=\'#333333\'/><embed src=\'http://h71016.www7.hp.com/html/interactive/_core/Gen5Core.swf?corePath=http://h71016.www7.hp.com/html/interactive/_core/&serverName=http://h71016.www7.hp.com/html/interactive/p1102w/\' quality=\'high\' bgcolor=\'#333333\' width=\'800\' height=\'470\' name=\'Gen5Core\' align=\'middle\' allowScriptAccess=\'always\' allowFullScreen=\'true\' type=\'application/x-shockwave-flash\' pluginspage=\'http://www.macromedia.com/go/getflashplayer\'></embed></object> </div></body></html>');
termWin.document.close(); termWin.focus();
});
});
</script>
which will be opened when the user clicks on a link with class newWindow.
<a href="#" class="newWindow">
<img src="@Url.Content("~/Content/Images/icon_demo_black.gif")" />
</a>
I have one issue:
- in Chrome the popup is empty, so the embeded object is not working (but I see with Inspect that the code was successfully put into the html source).
Can you please give a helping hand?
Chrome is firing the rest of the javascript before the window is ready to accept a write. I don’t have much time to test this right now on all the browsers, but it worked on Chrome 18 and IE9 http://jsfiddle.net/fordlover49/GP2Gz/
Basically, we just do a setTimeout with a fixed 100ms delay to allow time for the browser to get the window ready.
Note that the original answer (which was the same principal) added an extra check for the readyState of the document, but the readyState isn’t consistent across browsers (for example, Firefox 9 has a window state of “uninitialized” until you populate a url or something else on the page).
I tested this and it seemed to be working fine on IE8 & IE9, Firefox 3.6.8 & 9, Chrome 17 & 18