How to run a Javascript function on an iframe before the source (src) is loaded?


Tags: javascript,jquery,css,html5,iframe

Problem :

I've asked this question before this one, trying to figure out why I was seeing scrollbars on the a-ads iframes, on this website, while some swear they didn't see them! Hence, I have discovered that the appearance of the iFrame scrollbars is by execution order. And with faster or slower computers, results may vary.

I realize that I have to replace scrolling="no", a strong (but unsupported in HTML5), attribute that forces no scrollbars on iframes, with a JavaScript, or CSS alternative. However, the CSS overflow:hidden; is too weak to override whatever style the iframe's source may contain (e.g. overflow:scroll, overflow:auto, etc.). So the solution must be with JavaScript.

The caveat however, is that the javascript must activate after the iframe itself is loaded, but before the source (src="") is loaded. Because if scrolling="no" is replaced after the source is loaded it has no effect on the outcome of the iframe display. Though, if it is place before the <iframe> tag markup is reached, how does the JavaScript know what to modify? It is as good as not present at that point.

One More Problem: The source can't be stripped from the <iframe> tag, and replaced in JavaScript. We've tried that, and while it worked....sort of... we lost ad impressions and clicks into a black hole, because the spider (i.e. bot) at a-ads couldn't, or had problems with, detecting the proper a-ads code on the webpage. But if we left it in the iframe and just reloaded the source after scrolling="no" was set, then that would result in double ad-loads (i.e. invalid impressions).

This is a real pickle!

All the Einsteins of the world - You're Needed!

Also, this S.O. question doesn't apply.

Screenshots

Chrome Proof

IE Proof

Opera Proof

Firefox was best-behaved



Solution :

This issue has now been solved, for now, I think. Here is the solution:

<head>

    <script type="text/javascript">

    function noScrollBarsOnAAdUnit( ElementID )
    {   

        document.getElementById( ElementID ).setAttribute("scrolling", "no");       
        return true;

    };

    </script>

</head>

<body>

    <script type="text/javascript">noScrollBarsOnAAdUnit( 'aa-unit-top-center' );</script>
    <iframe id='aa-unit-top-center' style='width:468px;height:60px;' class='a-ads-frame' data-aa='[ad-id]' src='https://ad.a-ads.com/[ad-id]?size=468x60'>
        <!-- iframe fallback message here -->
    </iframe>
    <script type="text/javascript">noScrollBarsOnAAdUnit( 'aa-unit-top-center' );</script>

</body>

Fellow S.O. members, please, check this page, to assure this fix is consistent, and really works at least 99.99%, if not 100%, of the time.

Thanks!

-James A.


    CSS Howto..

    How to select the las Li with Xpath or Css Selector

    How to check if Html element has a background-image css property in WebBrowser control C#

    How I can get an Image height and divide it by 2 using Jquery

    How to css 3rd li in hierarchy?

    How to override a CSS class within a content div

    Background-Image does not show properly on IE8

    CSS How To: Easily make all rules check for 1 ancestor

    A scrollbar showing within DIV. What CSS is causing this?

    How to edit a css file in ASP.NET using C# to change the website design

    how to I use an Arabic font in my css?

    How can I expand a div to compensate for removing the bordering div's margin?

    CSS: how to style on character height versus line height

    How to fade in and fade out text on a timer using css animations

    How to add spacing in between
    [duplicate]

    CSS radio button border how to remove it?

    How to style a single QToolButton using qss/css

    How to prevent page jump when using # href to swap gallery images using a div ID?

    How to get a frame off animated png using CSS?

    How can i center the list items inside my unordered list?

    CSS selectors: how to make element hovering change wrapper's style

    how to make nav brand centrally aligned

    Fontawesome: How to control height and width of stacked icons

    How do you create a link out of circular text with JavaScript and CSS?

    How to animate a copy of the div from the current position to the top right

    How (and why) to use display: table-cell (CSS)

    how to add css for div tag

    CSS how can I add border also to triangle? [duplicate]

    How to change CSS of website if accessed through a mobile browser [closed]

    How to make the whole div clickable

    How to align text flush with bottom of container using CSS?