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. )
Related
I have added a setting that my project URL will never be loaded in an iframe by adding a header
response.setHeader("X-Frame-Options", "deny");
this is working fine but on the Iframe page , i just see a broken image saying refuse to connect with URL. Is it possible if i want to show some specific message with this kind of request or the URL will automatically open in a separate tab rather then the Iframe as we don't wan't customer to view this look and feel.
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 wrote a chrome extension which injects a toolbar on top of sites (say amazon.com) as an iframe at the top.
When the user click on the action button on the toolbar (inside iframe), it's basically a form submit action, with action pointing to my full site (on another domain).
It's working, however only inside the iframe. I'd like the whole page to redirect to my site, rather than the iframe.
Is there anyway to do that in extension?
If you are using an iframe :
Same Origin Policy prevents you from doing this.
Unless you can hack/XSS the other site's files to inject the JS, you will have a hard time.
Now if you legitimately need to communicate with the other page, and you either have control of the other page or can setup it to communicate with your server, you can use window.postMessage, JSONP or even Ajax with CORS (latter 2 will be harder to pass dynamic content though). But I believe it is not the case.
else :
you can directly inject the js script in to the page itself by that you can handle all operations in the main page same as running something on chrome console.
I am in the process of making a bookmarklet that allows users to highlight text on an external web page.
It runs JavaScript code that appends a JavaScript file from my server to the current web page that takes the title of the current web page, the URL of the current web page, and then the highlight text of the current web page. Finally, the user would click a button to submit the data to my web server to be saved into the database.
I have two ways of doing this: (1) have a popup with the data in the URL as parameters, or (2) to have an iframe inserted into the current web page with a form to submit the data.
In the one with the popup (1), the users browser auto blocks the popup for every domain. How do I get around this? It seems like Facebook share and twitter tweet buttons bypass the popup blocker though...
In the one with the iframe (2), I want to remove the iframe from the DOM after submitting data. However, if I'm on another domain, I get an error saying I am denied access because of origin policy something. I know it's possible because Pinterest's bookmarklet does this, it inserts an iframe then removes it from the current DOM.
I am looking for information on how these solutions work, so I can do something similar with my bookmarklet.
I resolved this by adding a post message callback after saving the data from the iframe.
How to use onclick in iframe tag to call a javascript.
I basically want redirect to other page when a user clicks on a iframe.I have added the facebook like button my site which is a iframe code. So once he has clicked on the like button i want him to get redirected to a thank you page
EDIT:
i don't want to redirect the iframe but i want to redirect the main page on any interactivity with iframe. On solution is on focus or or on click on iframe i should be able to redirect. Can i at least do it.
You can't do that. Facebook's XFBML elements (like the 'Like' button) are on a different domain than your own (and only function that way); using Javascript to modify that frame isn't possible due to security restrictions.