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.
Related
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 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)
I have a front page with an iframe that loads different content. I want a url that will take users to the front page with pageA loaded in the iframe or another url with pageb loaded. How do I do this?
Is there a simple html solution I'm missing or is this a jquery thing?
You can use a query parameter to specify the page you want the iframe to load.
www.example.com/my/link/page.html?iframePage=website_a
Then you can use Javascript to check the parameter, and specify which page the iframe loads.
Here's an example jsbin.
https://output.jsbin.com/hawinadevi/1?iframePage=website_a Loads Bing
Change the value of website_a to make the iframe load Bandcamp instead.
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 iframe on my web page. is there a way or JS library I can use to know which word user click within the iframe?
In short, no.
In long, yes.
If the iFrame is loaded on the same sub-domain and domain name as the page that contains the iFrame (www.example.com), you can interact with it without doing anything special.
If your iFrame is loaded on the same domain, but a different sub-domain (sub1.example.com, sub2.example.com), put this line of javascript at the top of your javascript file, in both the iFrame page and the page that contains it:
document.domain = 'example.com';
This will make the iFrame "think" that it is ok to communicate through javascript.
If the iFrame is on an entirely different domain, there is nothing you can do.