How can I display some text when an embedded object fails to display?

StackOverflow https://stackoverflow.com/questions/702764

Question

We have some html that looks like this:

<form id="MyUserControl" runat="server" method="post">
   <script language="javascript" src="javascript.js"></script>

The javascript file contains something like this:

document.write('<object id="MyUserControl" ');
document.write('classid="MyUserControl.dll#MyNamespace.MyUserControl"');
document.write('height="611" width="951" >');
document.write('<param name="Parm1" value="' + parm1 + '" />');
document.write('</object>');

Essentially, I'd like to be able to display some text or leave standby text in place if the object does not load properly.

The reason for all of this is that we are trying to migrate an old app from FoxPro to .Net while it's still in use. It's a fairly large application and we're converting a screen at a time. We're building .Net user controls and they are displayed in a browser object inside of FoxPro. The html and js above allow us to embed the winforms user control in a web page.

If a particular user does not have a code access group for our application server set up, the user control does not render and the screen just shows the little icon in the upper left corner that looks like something is trying to load. It never does load, but I want to signal the user to email our team to get their access straightened out.

I tried using standby and alt, but neither showed text. All of our users have IE7 and this is just a temporary solution (< 6 months).

Was it helpful?

Solution

You can put any inline elements within the object tag, and if it fails to load, they will be presented to the user.

<object>
  This object failed to load,
  try to install <a href="http://plugin-site/">here</a>
</object>

MSDN: OBJECT Element | object Object

Wanted to add some notes about odd IE behaviors. (IE < 8) When using the above code where failure content is to be displayed, you will lose access to the object in DOM. So you may want to keep it empty and do some extra code to determine the load success.

<!DOCTYPE html>
<html>
<head>
  <title>so-objects</title>
  <script type="text/javascript">

    function add(text) {
      document.body.appendChild(document.createElement("div"))
                   .appendChild(document.createTextNode(text));
    };

    function each(o, f, c) {
      for (var i=0, l=o.length; i<l; i++) f.call(c, o[i], i, o);
    };

    onload = function() {

      // IE returns null and has mysteriously removed the object from DOM
      add("byId = "+ document.getElementById("no-access") );

      // IE returns 2 instead of 3
      add("byTags = "+ document.getElementsByTagName("object").length );

      // verify successful load if the object property is available
      each(document.getElementsByTagName("object"), function(node) {
        add(node.id +" = "+ !!node.object);
      });

    };

  </script>
  <style type="text/css">
    object, span { position: absolute; left:-10000px; }
  </style>
</head>
<body>

  <object id="access">
  </object>

  <object id="no-access">
    <span>failed</span>
  </object>

  <object id="supported"
     classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6">
  </object>

</body>
</html>

Returned values for IE < 8

byId = null
byTags = 2
access = false
supported = true

Returned values for W3C Compliant

byId = [object HTMLObjectElement]
byTags = 3
access = false
no-access = false
supported = false

Try for yourself

OTHER TIPS

Adding another answer more specific to your situation.

Changing your javascript to this may produce the desired results (if there's only the one instance of this object being applied to the page).

function onchange(o) {
  if (o.readyState == 4) {
    if (o.object == null) {
      alert("UserControl is not installed, please email your administrator.");
      // or, toggle display of a message dialog in HTML
      //document.getElementById("not-installed").style.display = "block";
    }
  }
};

document.write('<object id="MyUserControl"');
document.write(' classid="MyUserControl.dll#MyNamespace.MyUserControl"');
document.write(' height="611" width="951" onreadystatechange="onchange(this)">');
document.write(' <param name="Parm1" value="' + parm1 + '" />');
document.write('</object>');
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top