I want to display my website in iframe of other domain(s). When displayed in iframe of that domain, I want to perform some actions like hiding/displaying content. Pages from my website are also iframed in same domain as well. So there is dynamic behavior. How do I find out where is my page iframed? There will be navigations from one page to another in iframe and whenever full page load happens, I want to know the context/parent where my page is iframed.
Using postMessage is not an option because it is async and I don't have control over other domains/apps. I found out iframe name can be accessed from following question -
access iframe name from inside iframe
Can I use it to find out the iframe context. (I can ask other domains/apps to set particular name to iframe so that they get correct rendering of the page)
Related
Is this even possible?
Background
I have a page that's basically just a logo and an iframe.
I have complete control over the parent page and can use whatever tricks I want (html, javascript, php, etc.).
The page in the iframe, however, is a third party page that I have very little control over. I can use no javascript, no css, I can't even modify any links. All I can do is modify some text.
Problem
I only need the logo on the initial page. Once the user logs in or clicks to a different page, I want that new page to open in the parent window. I know about target="_top" and target="_parent", but those won't help me because I have no real access to the links in the iframe.
Question
Is there any attribute I can put on the iframe or javascript I can use in the parent page that will force new pages in the iframe to load in the parent window?
I have a question about changing output of iframe. My site loads a front page (wordpress) where the entire content block is an iframe. Can I manipulate the output of the iframe from the wordpress side?
Say I want to scroll to an id tag in the content of the iframe, can I create a link on the frontpage outside the iframe that goes there?
Another example could be to pre-fill an input field in the iframe by clicking a menu link in wordpress, is it at all possible?
It can depend on whether the iframe is cross-origin or not (i.e. whether the src attribute on the iframe is on the same domain as your wordpress site).
If it isn't - then you can simply access the iframe contents using javascript from the parent window, e.g. (in the parent window):
const iframe = document.getElementById('<your-iframe-id>');
const iframeDoc = iframe.documentElement || iframe.contentWindow.document;
doThingsWithIframeContents(iframeDoc);
If it is cross-origin - then you will need to pass messages to a script you control inside the iframe document. That script will then manipulate the contents of the iframe itself. Without going into too much detail, take a look at https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage.
Edit: Actually, take a look at this other SO post that is relevant to this case: How to communicate between iframe and the parent site?
Hope that helps!
I have a web page which embeds content into an iframe. For the following scenarios, I need to know if there are ways to access key strokes which are entered inside the iframes without having to essentially modify the iframed content.
Parent page is www.testpage.com/framedwidgets.html and the framed content is www.testpage.com/widget1.html.
Widget 1 has normal text input fields and no password fields. Both the widget and the parent are of same origin. Is there a way to detect keystrokes inside the input field in the iframe from a javascript running in the context of parent page? What is the ideal method to retrieve keystrokes?
Parent page is www.testpage.com/framedwidgets.html and the framed content is www.anotherpage.com/widget2.html.
Widget 2 is loaded cross-domain. Its content similar to widget 1. Is there a way to retrieve keystrokes within the iframe from a javascript running in the context of parent page?
I have the following situation: A static web page, say whatever.html, which contains one iframe, both on the same website. The iframe contains a dynamic page (CGI/Perl), say cgi.pl?param=a; based on user action the content of the iframe will be replace by new pages (same CGI script with different parameters), say cgi.pl?param=b.
If the user opens only the iframe page I am able to redirect to the original parent page (the static HTML page):
if(self==top)
top.location.href = "http://www..../whatever.html";
This works, but I would like that the iframe contained in that page is set to the dynamic page which reestablishes the parent. In my solution the iframe will contain only the default dynamic page (cgi.pl?param=a), but it should show cgi.pl?param=b in the iframe.
I hope I explained clearly.
Thanks for your help!
pi
The answer is straightforward. Use the script above to call the container web page with a parameter (e.g. test.html?abcd) and then use a script calling
window.location.search.substring(1)
to send the parameter to the iframe src.
I have a simple HTML/PHP web page and one IFrame in it. The IFrame contains links to external web sites.
I need some JavaScript that will extract the exact URL of the web page that is currently displayed inside the IFrame (not just the base URL of the external site). How can this be done?
The way to access the url on the iframe is by checking the src attribute.
console.log(iframe.src);
// will print http://example.com
However, when the user navigate to a different page in the iframe, the parent window will still show the original url on the src property
You can use .contents() to get the contents of an iFrame. That page has an example too.
The following line will give you the current URL of the iFrame. Not the initial, but whatever it is showing when you call this:
document.getElementById("iframe").contentWindow.location.href
Note: This will only work if the page is on the same domain.