I created a custom control that inherits from PageViewerWebPart.

Now I need to toggle the allowTransparency attribute to = "true" on the rendered iframe to enable background transparency for the page in IE8+.

I wrote some javascript to do it (but it isn't working properly), and there are no exposed methods of the class to add attributes to a nested child element.

The control renders the following hierarchy of code:

        <td valign="top">
            <div WebPartID="00000000-0000-0000-0000-000000000000">
                <iframe title="Page Viewer">
                    <div class="UserGeneric">iframe not supported warning</div>

So here's my javascript:

function setTransparency() {
var divs = document.getElementsByTagName("div");
var element;
var eClass;
var result;

// Get "marked" div (container for fly out)
for (var i = 0; (element = divs[i]) != null; i++) {
    eClass = element.className;
        if (eClass) {
            if (eClass.indexOf("marked") != -1) {
            result = element;

// Find iframe contained within flyout
var ifr = findDescendantIframe(result);

if (ifr != null) {
    ifr.allowTransparency = "true";

// Recursive find of iframe (kind of) - if no children, no return value
function findDescendantIframe(parent) {
if (parent.hasChildNodes()) {
    for (var i = 0; (child = parent.childNodes[i]) != null; i++) {
        if (child.nodeName == "IFRAME") {
            return child;
        return findDescendantIframe(child);

Javascript may not be the answer. Is there any way to do this via C# or maybe there's something wrong with my js?

  • is jQuery an option? – Dave Wise Jun 8 '12 at 16:41
  • I don't see why not to be honest. – RJ Cuthbertson Jun 8 '12 at 19:32
  • Because in jQuery, you could do all of this with a single line something like: jQuery('#myPageViewer iframe').attr("allowTransparency","true") – Dave Wise Jun 8 '12 at 20:30
  • But the id and class are not consistent page to page. So I don't think this will work. – RJ Cuthbertson Jun 13 '12 at 12:36
  • I was being specific in the selector but if you have a predictable hierarchy to your pages you could tailor it to that as well. For example, if you know there will only be one IFRAME, you could use jQuery('iframe')... instead either way you will have to write javascript to target a specific element and it is orders of magnitude easier to do that in jQuery than in pure javascript. – Dave Wise Jun 13 '12 at 15:04

I resolved this by scrapping the control and writing my own using an HtmlTextWriter object to render the same HTML code, but with the addition of the allowTransparency attribute.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.