<iframe data="/localfile.html" type="text/html" width="200" height="200"></iframe>
<iframe data="http://example.com/remotefile.html" type="text/html" width="200" height="200"></iframe>
<object data="/localfile.html" type="text/html" width="200" height="200"></object>
<object data="http://example.com/remotefile.html" type="text/html" width="200" height="200"></object>
Under every browser except IE, all 4 of these tests work. Under IE 6 and 7, the last one fails and shows an empty frame.
Is there a workaround that allows IE to load the external html in an object?
Review the following for more information about how to use Object with IE: http://aplus.rs/web-dev/insert-html-page-into-another-html-page/
It boils down to a difference in what IE expects versus other browsers. For IE, you have to use the classid attribute instead of the type attribute. For example (from the above referenced site):
<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="some.html">
<p>backup content</p>
</object>
<![endif]-->
<!--[if !IE]> <-->
<object type="text/html" data="some.html">
<p>backup content</p>
</object>
<!--> <![endif]-->
Note that the classid is specific to the content type that you are trying to server.
Related
I have the following code to display the swf object on the page. It works well in all browsers. However, if shockwave flash turned off in Firefox, it won't fallback into image and show bunch of characters instead looking like "CWS q�x��wX�Y�7z�..." All other browsers fallback to the image. I verified that we serve application/x-shockwave-flash MIME type on our server.
<script type="text/javascript">
swfobject.registerObject("fd_flash","8.0.0");
</script>
<div>
<object height="376" id="fd_flash" width="940">
<param name="movie" value="path/file.swf" />
<param name="wmode" value="opaque" />
<!--[if !IE]>-->
<object data="path/file.swf" height="376" type="application/x-shockwave-flash" width="940">
<!--<![endif]-->
<div><img src="path/image.jpg" /></div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
Thank you!
You could try another way of using swfobject. Add a link in your <head> to your swfobject.js file, then in your <body> put this:
<div id="yourFlashDiv">
<!-- ALTERNATE CONTENT GOES HERE -->
<p>This paragraph will show if your Flash content won't</p>
<!-- FLASH CONTENT GOES HERE -->
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("path/file.swf", "SwfTitleGoesHere", "376", "940", "8", "#FFFFFF");
so.addParam("wmode", "opaque");
so.write("yourFlashDiv");
// ]]>
</script>
</div>
This is what I've used for swf display, and it has failed gracefully on every browser I've tested. Hope this helps
I am using object to play audio file in my html page. I need to use tow objects, one for IE and one for other browsers
The current code is shown below
<object id='audioPlayer' classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6' type='application/x-oleobject'
height="42" width="250">
// giving parameters here
<%-- !IE--%>
<object type="video/x-ms-wmv" data="<%: Model.recordSourcePath %>" width="251" id="audioPlayerMozilla"
height="42">
// giving parameters here
</object>
</object>
Its works fine.But the problem is i need to give diiferent id's for both objects(ie,audioplayer and audioPlayerMozilla). If i give same id for both java script is not works in mozilla. I must want to get access to this object using same id . Can i generate htmls based on browser
a sample i wanted is shown below
if (IE)
{
<object id='audioPlayer' classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6' type='application/x-oleobject'
height="42" width="250">
// giving parameters he
</object>
}
else if(!IE)
{
<object type="video/x-ms-wmv" data="<%: Model.recordSourcePath %>" width="251" id="audioPlayer"
height="42">
// giving parameters here
</object>
}
Here, note that the id i used is same. So i can handle them genereally. Is there any way to do anything like this?
What you're looking for is known as "IE Conditional Comments". Rather than explain the entire thing, I'll link to an article which does that for me.
http://www.quirksmode.org/css/condcom.html (better)
http://www.positioniseverything.net/articles/cc-plus.html
Example:
<!--[if IE]
<p>This is IE!</p>
![endif]-->
<!--[if !IE]>-->
<p>This isn't IE!</p>
<!--<![endif]-->
Specific Example:
<!--[if IE]
<object id='audioPlayer' classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6' type='application/x-oleobject' height="42" width="250"></object>
![endif]-->
<!--[if !IE]>-->
<object type="video/x-ms-wmv" data="<%: Model.recordSourcePath %>" width="251" id="audioPlayer" height="42"></object>
<!--<![endif]-->
This method is only good for distinguishing between different versions of IE, and as a generality, browsers that are not IE. For example, you can have one version for IE6, another for IE7, IE8 and IE9, and another for all other browsers. You couldn't though, using this method, have one specific output for firefox.
You could just avoid the hack (conditional code) altogether and use a player such as this: http://www.jplayer.org/
It's going to give you a more feature rich player with guaranteed compatibility.
I'm trying to embed my java applet using the object tag in html. While trying to research how to accomplish this task I came across this SO post.
when trying to put the code into action on my page it looks a little something like this...
<object name="Battleship"
width="750"
height="800"
classid="java:ApplicationApplet.class"
type="application/x-java-applet">
<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
codebase="http://java.sun.com/update/1.5.0/jinstall-1_5_0-windows-i586.cab"
height="800"
width="750">
<param name="code" value="ApplicationApplet" />
Your browser is not Java enabled.
</object>
</object>
However, when I run this it crashes IE, but is fine in FF. I'm curious if there's something I'm missing to distinguish that IE should run the inner object and FF and others the outer object?
Thanks guys!
Yes the conditional comments
http://en.wikipedia.org/wiki/Conditional_comment
<!--[if !IE]> Firefox and others will use outer object -->
<object name="Battleship"
width="750"
height="800"
classid="java:ApplicationApplet.class"
type="application/x-java-applet">
<!--<![endif]-->
<!-- MSIE (Microsoft Internet Explorer) will use inner object -->
<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
codebase="http://java.sun.com/update/1.5.0/jinstall-1_5_0-windows-i586.cab"
height="800"
width="750">
<param name="code" value="ApplicationApplet" />
Your browser is not Java enabled.
</object>
<!--[if !IE]> close outer object -->
</object>
<!--<![endif]-->
Do conditional comments behave as expected across browsers? Can they cause rendering bugs or other issues?
Are there any errors in the formatting/syntax of this CC?
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="718" height="227" id="swf">
<param name="movie" value="images/swf.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="images/swf.swf" width="718" height="227">
<!--<![endif]-->
<img src="images/alt.jpg" border="0" width="718" height="227">
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
Conditional CSS comments are specific to IE on windows. See what wikipedia has to say.
If used correctly, they will be interpreted as regular comments in other browsers. It really depends on how you are using them.
The example you posted will not work correctly, as you are supposed to wrap the whole conditionals in an HTML comment.
Wrong:
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="images/swf.swf" width="718" height="227">
<!--<![endif]-->
<img src="images/alt.jpg" border="0" width="718" height="227">
<!--[if !IE]>-->
</object>
<!--<![endif]-->
Right:
<!--[if !IE]>
<object type="application/x-shockwave-flash" data="images/swf.swf" width="718" height="227">
<![endif]-->
<img src="images/alt.jpg" border="0" width="718" height="227">
<!--[if !IE]>
</object>
<![endif]-->
Conditional comments are just HTML comments, they cannot affect other browsers because they are treated as what they are. Only IE will recognize a conditional comment.
Do conditional comments behave as expected across browsers?
From my experience, yes. (IE only as others have said)
Can they cause rendering bugs or other issues?
No, not the comments themselves. The code within, possibly, but to the same extent any code can cause rendering bugs or other issues.
Are there any errors in the formatting/syntax of this CC?
Not that I can see, easiest way is to test it.
Are there any ways providing an alternate GIF/PNG image, in case the user has no Adobe Flash installed and/or deactivated.
I’ve found recommendations, like the following from W3C, which determine via JavaScript the existence of Adobe Flash on the client: W3C Providing alternative images
Honestly, I would prefer a non JS technique. I’m thinking of some XHTML tag, equivalent to <noscript>. (like <noobject> if the object (in our case Flash) can’t be displayed/loaded).
The reason for needing this separation is the following:
The bank I’m working for will preferably display their banners in Flash format. In case it isn’t possible a simple image should be shown.
In the past it was solved very likely in the way mentioned before. We’re currently working on a design refresh and that’s where I stumbled upon this piece of code which makes me wonder if it’s really the most elegant and compatible way of doing so.
Another idea that strikes me: Is it actually possible to load Flash-objects in a JavaScript disabled environment?
Actually having flash installed but javascript turned off is a valid scenario. This should work across most browsers:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="flashContent">
<param name="movie" value="flash.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash.swf" width="800" height="600">
<!--<![endif]-->
<img src="(...)" alt="Put your alternate content here" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
I use the following code for graceful degradation. It works well.
<!--[if !IE]> -->
<object type="application/x-shockwave-flash" data="flash.swf" width="500" height="100">
<!-- <![endif]-->
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="500" height="100">
<param name="movie" value="flash.swf" />
<!--><!--dgx-->
<param name="loop" value="false">
<param name="menu" value="false">
<param name="quality" value="high">
<img src="flash_replacement.png" width="500" height="100" alt="No Flash">
</object>
<!-- <![endif]-->
I don't know why you want to avoid javascript, it is the best solution when dealing with Flash.
using the SWFObjects Library (the best known so far for the matter) you can do this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> My Home Page </title>
<meta name="viewport" content="width=780">
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div id="splashintro">
<img src="splash_noflash.png" />
</div>
<script type="text/javascript">
var so = new SWFObject("csplash.swf", "my_intro", "300", "240", "8", "#338899");
so.write("splashintro");
</script>
</body>
</html>
what the script does is replace the splashintro div with the flash file, if the browser does not support Flash, then does nothing and the splash_noflash.png will be shown.
P.S. With this technique you are ready for the iPhone, instead of showing the blue cube, it will show the image :)
I find using inline styling to do the trick.
For example:
<div style="background-image: url('...');">
<object>
/* Embedded Flash */
</object>
</div>
We can provide an alternate GIF/PNG image, in case the user has no Adobe Flash installed and/or deactivated.
<object id="flashcontent classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550px" height="400px">
<param name="movie" value="mymovie.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="mymovie.swf" width="550px" height="400px">
<!--<![endif]-->
<p>
Fallback or 'alternate' content goes here.
This content will only be visible if the SWF fails to load.
</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
And also add this...
<script type="text/javascript">
swfobject.registerObject("flashcontent", "9", "/path/to/expressinstall.swf");
</script>
I have written an easy way to do this in CSS - no extra JavaScript at all.
Name your ID/Class where your Flash movie resides and use a background image. Wrap your Flash movie within that div.
For example:
<div ID="MyFlashMovie"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="flashContent">
<param name="movie" value="flashMovie.swf" />... etc., etc.</object>
</div> etc.
Then in your CSS:
#MyFlashMovie {
background: url("alternateGraphic.png");
background-repeat: no-repeat;
height: XXpx;
width: XXpx;
}
When the Flash isn't available, say on the iphone/pad, the graphic will display. The only drawback with this, that I have found, is that if your Flash movie uses a transparent background, you will see the alt graphic through the transitions. Just make a solid color within the Flash movie as your lowest layer (make sure it's the same bg color as the website) and it will look fine.
~GreaseJunkie