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)
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 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
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.
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 have an aspx page in one of my .Net Web application. Inside which I am having iFrame that show a URL content.
My requirement is to restrict user from using right click option. I have already implemented the Javascript code for this, but it is working only outside the iFrame on the page NOT inside the iFrame i.e. when I run the project and right click somewhere outside the frame it shows proper error message but when I right click inside the frame it, allows the user to right click (View source).
Any idea how to achieve the desired result?