We Keep Coding

Javascript: How can I get ancestor element of a dynamically written iframe from within the iframe?

I have a div on a page that is used by Google to write out a child div and child iframe ad inside of it.
<div id="ads-pos-111" class="module ad ad-111" data-pos="922"></div>
When the iframe ad is written, the DOM looks like this:
<div id="ads-pos-111" class="module ad ad-111" data-pos="922">
<div id="google_ads_iframe_/123456/consumer/hco_3__container__" style="border: 0pt none;">
<iframe id="google_ads_iframe_/123456/consumer/hco_3" title="3rd party ad content" name="google_ads_iframe_/123456/consumer/hco_3" width="1" height="8" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" style="border: 0px; vertical-align: bottom; width: 100%; height: 578px; margin: 0px;"></iframe>
</div>
</div>
I want to write Javascript code inside the iframe that can traverse its ancestors to get the value of the data-pos attribute two ancestors above. I would like to use something like jQuery.closest('.data-pos').
I cannot use the iframe name as an anchor point as the name is generated dynamically by Google. Nor can I use the parent div ID, as there are potentially multiple ads on the page. So,I can't use code like window.parent.$('#google_ads_iframe_/123456/consumer/hco_3') as I won't know the ID. Each iframe needs to "self-detect" what "data-pos" it is located in.
Has anybody encountered this situation?
(iframes are served on same domain as parent page)

positioning pop-up iframe according scrollTop of top window

I'm developing plugin which has some pop-up. Plugin is included on some page like iframe but with different domain. There is not allowed to do any other changes on that page except to add this iframe.
<iframe class="frame" style="width:100%" src="another-domain.com" frameborder="0" scrolling="no" height="4500px"></iframe>
Pay attention that scrolling="no" and height is much bigger then heigh of page.
Pop-up should be vertically centered on the page when it appears, doesn't matter how much user scrolled down the page. See the pic
I tried $(top.window).scrollTop() but there is Cross-domain problem.
Is there any css trick to do this?
Thank you in advance.

You can try with transform: translate() function CSS
iframe {
top: 50%;
position: absolute;
transform: translateY(-50%);
}
<iframe class="frame" style="width:100%" src="another-domain.com" frameborder="0" scrolling="no" height="4500px"></iframe>

Make iframe/form fixed position

I have an iframe on my site wrapped in a div.
If I enter only one character in the telephone box it doesn't validate so red warning text appears.
If I then click in the email box and press tab twice, on the second tab the form shifts to the left so I can no longer see the question text.
How can I horizontally fix the form so it doesn't move to the left?
IFrame code:
<div style="border: 0px solid #a1a1a1; width: 450px; border-radius: 25px; background: #83aeff; overflow: hidden;"> <iframe style="overflow: hidden;" src="https://secure.workbooks.com/process/=QzM/Workbooks_Signup_Form?edition=trial" width="490px" height="330px" frameborder="0" scrolling="no">
</iframe></div>
URL: http://content.workbooks.com/free-trial-workbooks-crm

This happens because iframe width you've chosen is too small (I think this is due to the Industry select box). Just increase both div and iframe width and the shift disappears.
<div style="border: 0px solid #a1a1a1; width:540px; border-radius: 25px; background: #83aeff; overflow: hidden;"> <iframe style="overflow: hidden;" src="https://secure.workbooks.com/process/=QzM/Workbooks_Signup_Form?edition=trial" width="500px" height="330px" frameborder="0" scrolling="no">
</iframe></div>
Fiddle
EDIT
To dynamically adapt iframe height, you can use this jquery library. Upload iframeResizer.contentWindow.min.js script to your server and include it from iframe page:
<script type="text/javascript" src="iframeResizer.contentWindow.min.js"></script>
Then upload iframeResizer.min.js, include it from the page with the div that contains iframe and invoke the proper function to resize iframe:
<script type="text/javascript" src="iframeResizer.min.js"></script>
<script type="text/javascript">iFrameResize();</script>
This should do the trick. For more details, refer to the GitHub page linked above.

iframe disable scrolling on tab

I have an iframe that looks like this:
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com" style = 'height:100px;width:200px;' scrolling = 'no'>
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
so when I press tab in the iframe, it traverses through all the links , automaticall scrolling all the way to the bottom of the site that's in the iframe. What I want to do is make the iframe so that tab only within the rectangle box where height = 100px, width = 200px and ignore everything else on the site...basically clip everything else that doesn't fit into this rectangle...
I tried setting height and width and also overflow:hidden, but that doesn't seem to do the trick.

This blocks user from being able to click on anything in the iframe but for some reason, you can still click inside and tab through :-( fiddle
<div id="IframeWrapper" style="position: relative;">
<div id="iframeBlocker" style="position: absolute; top: 0; left: 0; width: 400px; height: 200px"></div>
<iframe src="http://www.w3schools.com" style='height:200px;width:400px;' scrolling='no'>
<p>Your browser does not support iframes.</p>
</iframe>
</div>

You can't do anything about it, but instead you can run a JS on iframe load which cam hide the html contents from your iframe which you don't want to be displayed
you can refer to these similar questions to get the idea:
Changing div in iframe using Jquery
jQuery, select element inside iframe, which is inside an iframe
And there's a similar discussion on jQuery forums here: https://forum.jquery.com/topic/changing-elements-in-an-iframe

JQUERY gotcha, Why can't I change inside an iframe that is hosted locally?

Give the following on a page:
<iframe frameborder="0" allowtransparency="true" tabindex="0" src="" title="Rich text editor" style="width: 100%; height: 100%;" id="hi-world">
<p><span class="tipoff" title="System tooltip for search engines">Download now</span></p><p>adasdads</p><p>a</p><p><span class="tipoff" title="System tooltip for search engines">Download n1111ow</span></p>
</iframe>
The following works:
$('#hi-world').css("width","10px");
But what I want to do is change the paragraphs in the iFrame, and this does not work:
$('#hi-world').find('p').css("background","red");

ok just figured it out:
$('#hi-world').contents().find('p').css("background","red");

The first is changing the css of the iframe element. To do the second, you have to access the contentDocument. As noted, in jQuery you can use contents for this.