iframe problems - javascript

I have a page that has an embedded iframe doing ajax requests....
when i click on a link i want the new link to open up in the main window and not the iframe which it is doing right now...
i tried doing this in javascript
window.parent.location.href = url of link
doesnt work...
anyone out there with a better idea to do this???
also i need popups to appear onhover over the links...right now they get clipped by the main page....
thanks

Try setting target="_parent" to the anchors.
But judging from your requirements, I'm suspecting an iframe is not the ideal solution for you at all. You might want to consider switching do a div with fixed width and height and an overflow: auto style.

Try this...
top.location.href = 'http://www.google.com';

Related

Thank you message not visible when submitting iframe form with long content, need to scroll up parent to see it

I'm placing a form (that I host) on this demo page (cross-domain).
I can add code on both parent and child.
The iframe auto-resize works perfect (using iframe-resizer), but when submitting the form on mobile or desktop with narrow window (so longer scrollbar) the thank you message is not visible right away. You need to scroll the parent page up a bit to see it which may cause confusion to people.
The iframe is perfectly shrunken down to the right size, but somehow need to do a custom postMessage to tell the parent to scroll/jump their page up to the top of the embedded iframe.
Any thoughts on how to use the already existing iframe-resizer script or can i just do a postMessage without it, if yes how?
Thank you in advance!
Have you tried
document.getElementById('thankyou').scrollIntoView()

Controling link behaviours in an Iframe

Ok so any help here would be great
I have a HTML page with an I frame loading a site of mine in it…
What I need to do is check in the iframe from the main document, the target attribute of a link and if it's blank, hijack it and add my own custom functionality from outside of the iframe in the main HTML document
The issue I have is the site being loaded in to the frame is on a different domain so I am not sure if this can be done? I have full control of the site been loaded in to the I frame so is there something in there I can set to allow it?
What I effectively want to do is hijack the links in an iframe which I guess could be an issue?
Can this be done, alternately does anyone know a way I could achieve what I am trying to do?
Thanks

Customize scrollbars for iframe

I was wondering if is possible to customize the scrollbars for an iframe. Both the iframe and the page are on the same domain so there are no issues there. If so, what route should I take and is this something that I should be doing? (design-wise).
I will be updating this as I get it working. Just thought I'd try to get some insight ahead of time.
Thanks
Okay, I ended up getting it working using jScrollPane. The only hangup I had was that jquery.jscrollpane.css needed to be inside each iframe, not outside, which makes sense.
Afterwards, all it took was
$("iframe").each(function(){
var body = $("body",this.contentWindow.document) ;
body.jScrollPane();
});
where the above javascript is present in the parent of the iframe. The jScrollPane js files are also in the parent, not each individual iframe.
Afterwards, the scrollbars are sticky. I solved this by covering the iframe in an invisible element after the scrollbar is clicked and uncovering when released. This was done by
$(".jspDrag",body).on('mousedown',cover_iframes);
$("body").on('mouseup',uncover_iframes);
where cover_iframes and uncover_iframes call the .show() and .hide() of the covering element, respectively.
Now I noticed that when the scrollbar is moved, it is shifted over by the offset of the iframe. I am working on fixing that now.

Resize Iframe Height as per content with in the Iframe

so far what i research seems not be help. I am not jquery sabbie but it seems that it's not working. There are links within the iframe and once you click on each link, it expands and give you the content for that link. well the iframe height does not move along with it. here is my code. Here is what is in the header.
<script type="text/javascript">$(document).ready(function () {$('iframe').iframeAutoHeight({debug: true});});</script>
body tag:
<iframe src="http://www.promero.com/defaultNewsTest.asp" class="auto-height"scrolling="no" frameborder="0"></iframe><script>$('iframe.auto-height').iframeAutoHeight({minHeight: 240});</script>
the site is http://promerostage.promero.com/
Take a look at the following article. I hope it will gonna resolve your issue as there is the solution in it, you seek for.
http://sonspring.com/journal/jquery-iframe-sizing

iFrame move page up to parent div / top

I have an iFrame within a parent page the length of the content varies from page to page in the iFrame so I would like to have the page jump back up to the top in certain situations.
This works fine in IE where breadCrumb is the id of a div in the parent window.
<script>
window.parent.location = "#breadCrumb";
</script>
It jumps the page to the right spot and the url is the parentwindowurl.aspx#breadCrumb
However in Chrome and Firefox this does not work it changes the page to the url iFrameurl#breadCrumb which replaces the parent page and has no breadCrumb div.
Does anyone know how I can get this to work in Chrome and Firefox?
Or is there a better alternative I should be using?
Try this one
window.parent.location.href = "#breadCrumb";
Assuming you want it to the very top, it's easy
https://developer.mozilla.org/en-US/docs/DOM/element.scrollTop
window.parent.scrollTop(0);
sorry it might actually be
window.parent.document.body.scrollTop(0);
if not, please let me know the error
The location hash is normally used to scroll to an anchor tag with a matching name attribute, so you would need to have a tag like:
<a name="breadCrumb"></a>
in the parent frame in order to have the browser scroll to that content with a location hash.
I'm not familiar with this behavior on div tags; that might be an IE-specific feature.

Categories