README.md

---
title: REST API with Gradio and Huggingface Spaces
emoji: 👩‍💻
colorFrom: blue
colorTo: green
sdk: gradio
sdk_version: 5.34.2
app_file: app.py
pinned: false
license: openrail
---

# Dynamic Space Loading
---

## 1. **Sending Data To/From IFrames**

### **A. Standard Web (HTML/JS) Context**
- **IFrames are sandboxed:** By default, an iframe is isolated from the parent page for security reasons.
- **postMessage API:**  
  - The standard way to communicate between a parent page and an iframe (and vice versa) is using the [window.postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) API.
  - This requires both the parent and the iframe to have JavaScript code that listens for and sends messages.
  - Example:  
    - Parent: `iframeEl.contentWindow.postMessage({data: "hello"}, "https://iframe-domain.com")`
    - IFrame: `window.parent.postMessage({data: "hi back"}, "https://parent-domain.com")`
- **Limitations in Gradio:**  
  - Gradio does not expose a built-in way to inject custom JS for postMessage into the iframe or parent.
  - If you control both the parent and the iframe (i.e., both are your own apps), you could add custom JS to both and use postMessage.
  - If the iframe is a third-party app (like a Hugging Face Space you don’t control), you cannot inject JS into it, so you cannot send/receive data programmatically.

### **B. Gradio Context**
- **No built-in Gradio API for iframe communication.**
- **You can use gr.HTML to inject a script into the parent,** but you cannot inject into the iframe if you don’t control its code.

---

## 2. **Sending Data Between Tabs in Gradio**

- **Tabs in Gradio are just layout elements:** All components in all tabs exist in the same Python process and can share state.
- **You can use gr.State or any shared variable:**  
  - For example, you can have a gr.State object that is updated in one tab and read in another.
  - You can also use hidden components or callbacks to pass data between tabs.
---

## 3. **Summary Table**

| Method                | Parent ↔ IFrame | Tab ↔ Tab (Gradio) |
|-----------------------|:--------------:|:------------------:|
| postMessage (JS)      | Yes (if you control both) | N/A              |
| gr.State              | No              | Yes               |
| Hidden Components     | No              | Yes               |
| gradio API            | No              | Yes               |

---

## 4. **Practical Recommendations**

- **For arbitrary Hugging Face Spaces in iframes:**  
  - You cannot send/receive data programmatically unless the Space itself is designed to listen for postMessage.
- **For your own Spaces:**  
  - You can add JS to both parent and iframe to use postMessage.
- **For Gradio tabs:**  
  - Use gr.State or shared components for seamless data transfer.

---

**If you want a code example for tab-to-tab data sharing, or want to explore advanced iframe communication (with custom JS), let me know!**