Comments (6)
Hey @CNDW. Just wanted to let you know I saw your issue. I haven't investigated usage of Penpal with srcdoc
yet, so this will be interesting. I'll try to get some time soon to dig into the issue.
from penpal.
Could you give me the value of iframeContent
in your example? Feel free to trim out the irrelevant bits.
from penpal.
Also, I know Penpal will stomp over src
currently, but if it didn't, would you be able to use a data URI e.g., (data:text/html,<html>...</html>
) instead of a JavaScript scheme?
from penpal.
iframeContent
is a document string in that example. e.g.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>title</title>
</head>
<body style="margin: 0;">
</body>
</html>
The javascript scheme is the polyfill, I'm unsure of what kind of support a data URI would have but as long as I am able to support the same browsers with a data uri instead of a javascript scheme it would work.
from penpal.
@CNDW, I just released version 4 of Penpal which includes both srcdoc
support and data URI support when using src
. In your case, you would set srcdoc
in browsers that support it and instead set src
in browsers that don't. When setting src
, you would use a data URI as follows:
iframe.src = `data:text/html,${htmlSrc}`;
I decided not to support JavaScript schemes, because Edge reports a different origin on postMessage
messages than all the other supported browsers and I'd prefer to not have browser detection code and the accompanying workaround in Penpal if possible. It seems like using a data URI should be a reasonable alternative.
Note that version 4 of Penpal drops Internet Explorer support.
Let me know how it goes!
from penpal.
Thank you for the work on this.
Note that version 4 of Penpal drops Internet Explorer support.
This makes it a dealbreaker for me, I still have to support IE 11. At this point I will likely have to fork an older version and make a manual fix :(
from penpal.
Related Issues (20)
- Compatibility v4-v5 HOT 2
- Latest chrome update breaks the penpal HOT 2
- TypeScript imports with Penpal 5.2.0 HOT 6
- Serializing Objects with Functions causes an error HOT 4
- Provide typing for Connection HOT 1
- How to detect if connection with child was lost? HOT 11
- Option to skip iframe validation? HOT 6
- Remove check that determines if `connectToParent` is running inside iframe HOT 1
- Iframe Removal Monitoring not Working with Custom Elements HOT 7
- Export types HOT 6
- Types for the response of Promise returned after connection established HOT 2
- dynamic iframe url HOT 3
- Make parentOrigin on connectToParent required
- Including penpal in babel producing errors HOT 1
- Examples for using with React Hooks HOT 4
- error "Cannot read properties of null (reading 'postMessage')" HOT 9
- Question: Why does penpal use Window#postMessage instead of MessageChannel? HOT 2
- connected fail HOT 2
- [Penpal] Parent: Awaiting handshake
- Feature request: allow subdomains of childOrigin HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from penpal.