CODEWITHSUNDEEP
javascripthtmlreference
Jocke
Jocke

Reputation: 83

Add a CSS reference to an HTML object tag

I have an HTML document that is overwritten completely on a daily basis. Yet I want it styled with CSS. I reference this document to my website within an "object" tag.

Website code:

<!doctype html>
<html>
<head>
  ..
 <link rel="stylesheet" href="../stylesheet.css">
</head>

<body>
        ..
        <object type="text/html" data="../../test.html" width="100%" height="600" style="overflow: auto; border: 5px; ridge blue">
        </object>
        ..
   </body>
</html>

Now since I can't add any code to the "test.html" (that's displayed in the object tag, since it'd be overwritten the next day) I wonder if there's a workaround, to link a stylesheet to the document? Perhaps a JavaScript or similiar?

The "test.html" code is generated using a C# code, extracting data from an Excel file.

Appreciate any assistance on this matter!

Upvotes: 2

Views: 2172

Answers (1)

raina77ow
raina77ow

Reputation: 106483

You have two options:

  • either import the body of that document inside the specific placeholder (element with specific ID) of the main page, via AJAX or other means. In this case you can style the whole page using that placeholder ID, which should give you proper specificity (but won't protect against !important rules)

  • or inject your CSS on-the-fly into this object (using contentDocument property of object element), decorating the inner HTML instead.

Both of those apparently require JavaScript. In our case we initially went with the latter approach, running CSS injections inside object load handler. This worked relatively smoothly until we faced the wall of bugs related to embedded objects in iOS - and had to switch back to the dedicated contents placeholder.

Upvotes: 3

Related Questions