I have a base page in which am using a Iframe of different domain.
Content gets render but if user click on any link rendered inside iframe it get open as normal page.
I want it to be opened in Iframe only.
for information, I can control my base page as well as application hosted on different domain.. which i want to so in iframe.
In simple words whole site that is opened in iframe, user should be able to do his work in iframe only. click on any link inside iframe should not open in browser. so that I can create a central application which can open my application(Existing) in iframe. As well as if user open the application seperatly it can also work.
If you don't have access to the code of the iFrame page you won't have a chance of doing this.
See: https://en.wikipedia.org/wiki/Cross-site_scripting
Technically, you could use .postmessage() to get the child content inside the iframe to send a message to the parent to change the iframe source on button clicks.
Note, this will only work if you have control of the child code getting rendered inside the iframe, which I cannot tell from your question.
Example, in your child site, inside the iframe, it would need code to send to the parent page (outside the iframe) when you click INSIDE the iframe site:
self.parent.postMessage("stringSayingDoSomething", "*");
Then, your parent site has an event listener set up to receive the message and perform an action.. that action can be doing something on the parent side.. or, sending a message back down to the child site to do something instead:
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
switch (message) {
case "stringSayingDoSomething":
DoMyFunctionNowThatChildFrameHasToldMeTo();
break;
Here is another question on stack overflow addressing the issue: Communicating cross-origin from parent to child iframe
Related
Well I wanted to get the text from a tag element inside an iframe, what I mean is that I would like to click any element inside said iframe and be able to retrieve the text of said tag back to the parent window just like this code does with my current page:
$(document).click(function(event) {
var text = $(event.target).text();
});
PS: The website contained in the iFrame is not under my control basically I want to web scrape the website but was trying to create a tool to ease the process
So in order to communicate between the iframe and parent window, either the content of the iframe has to have been generated by the JavaScript (not sure if it applies if it's an iframe of another file on the same server as well...) Or you have to otherwise have access to the source code of the iframe page, to implement the postMessage API to send data to and from the main page
For example, somewhere in your iframe source code, like on the click of an element, you can call postMessage to send a message to the main frame
myButton.onclick= ()=>{
parent.postMessage({message:"you clicked something"},"*")
}
Then in the main file you listen for new messages
onmessage = e=>
console.log(e.data)
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)
We have an iframe that is showing one of our pages. The content of the iframe has an enableFullScreen method which as its name implies make the content go full screen.
We want to trigger this method when the user clicks on a button that is inside the page that hosts the iframe. We tried using post message but this doesn't work probably because post message is not a user initiated event. Making the iframe fullscreen ( without post message ) is not an option because the content inside the iframe needs to know if it is in fullscreen mode or not.
Thank you
(edit: The relevant question (Invoking JavaScript code in an iframe from the parent page) does not apply here because the iframe is hosting a page that is in a different domain, so we can only send messages to it rather than call methods directly. )
I am using an Iframe window to display the login form of another website. And what I want is the user should go to that particular site after logging in(even if logging in fails, any click on any link in that iframe should take the user to that site in the full window(parent window).
As long as the links (within the iFrame) are part of the other page, you can't "hijack" their target. You would have to have the means and ability to modify the target attribute of each link to point to _parent or use javascript to reference the window.parent.
Based on what you're saying (you're logging in to a different domain and the page is not part of your site) this wouldn't be possible without implementing some kind of proxy where you could modify the contents between page visits.
I know there are several questions/answers already about how to redirect a parent window from within an iframe, but this one has a slight twist.
I need to be able to redirect the parent window when the page in the iframe is changed. However, the page in the iframe is not on my domain, so I can't use the parent.window.location trick that was suggested in other threads.
So, for example, if I put stackoverflow.com in my iframe, I need the parent frame to redirect when the user clicks any link on the stackoverflow page.
I doubt this is actually possible, but I thought there might be some sort of polling of the iframe that the parent can do or something.
This is a bit convoluted, but should do the trick. If you define your IFRAME like this
<iframe id="xMyIframe" src="http://someurl" onload="replaceLoad(this)" ></iframe>
Then you can define a JavaScript code;
function replaceLoad(oIframe) {
oIframe.onload = function () {
location.href = 'http://www.microsfot.com'
}
}
On load of the initial Iframe URL inital onload event handler fires which replaces itself with new handler that will fire after next load i.e. after user clicks link in the iframed page.