iframe
Förkortningar
- FIF - Friendly iFrames
- XSS - Cross-site scripting
Programmeringsspråk
Tagg i HTML
iframe
Attribut i HTML
allowfullscreenallowtransparencysrcsrcdocloading
Ändra höjd på iframe med Javascript
frameElement.style.height = '320px';
<iframe src="foods.php" name="test_frame"></iframe>
window.onload = function() {
alert(window.frames['test_frame'].document.body.innerHTML);
}
Den iframe som koden laddas in i JavaScript
frameElement
Alternativ
top.document.querySelector('iframe')
Centrera det element ovanför iframe från iframe
frameElement.parentNode.style.margin = '0 auto'
Getting the source code of an iframe
document.getElementById('iframeID').contentDocument.body.innerHTML
document.getElementById('iframeID').contentWindow.document.body.innerHTML
What's the best way to reload / refresh an iframe using JavaScript?
document.getElementById('some_frame_id').contentWindow.location.reload();
JavaScript
Post data (child iframe)
jsonMessage = {first: 'lorem', last : 'ipsum'};
window.parent.postMessage(JSON.stringify(jsonMessage), '*');
Get data (parent iframe)
window.addEventListener('message', receiveMessage, false);
function receiveMessage(event) {
if (event.origin == 'http://example.com:8080') {
jsonMessage = JSON.parse(event.data);
}
}
Skrolling av iframe
.scroll-wrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
/* important: dimensions or positioning here! */
}
.scroll-wrapper iframe {
/* nada! */
}
Funktion som visar hämtar position och storlek för fönster i Electron.js
win.getBounds()
Länkar
Externa länkar
- Mozilla.org Developer Iframe Scripting
- Css-tricks.com Forums Topic iframe scrolling problems in iOS iPhone 5-6
- David Walsh.name Scroll iframes iOS
- http://blog.cakemail.com/the-iframe-cross-domain-policy-problem/
- http://stackoverflow.com/questions/1301540/set-variable-in-parent-window-from-iframe
- http://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript
- http://stackoverflow.com/questions/6138617/writing-from-iframe-to-the-outside-web-page
- http://stackoverflow.com/questions/5604839/accessing-an-element-outside-of-iframe
- https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Kuriosa
Escape for srcdoc
$0.innerHTML.replace(/"/g, '"')
Liknande
- Frames
- Fönster
Liknande namn
- Wireframes
- Aframe
- Framer
- CORKFRAMES