We Keep Coding

How to embed replit in iframe dynamically?

I'm trying to embed replit here https://jsfiddle.net/69ajeskL/2/
It doesn't work why ?
html:
<div id="placeHolder">
</div>
js:
let placeHolder = document.getElementById('placeHolder');
let iframe = document.createElement('iframe');
placeHolder.appendChild(iframe);
iframe.src = "https://replit.com/#SilkyS/HelloWorld?v=1";

Do you guys not know about
?embed=true
you can even do
?lite=1&outputonly=1
eg:
https://replit.com/#SilkyS/HelloWorld?embed=true
Or:
https://replit.com/#SilkyS/HelloWorld?lite=1&outputonly=1
I would recommend
?lite=1&outputonly=1
because it is more user friendly. (No, it does NOT work on the homepage of replit.com)

You can't embed https://replit.com/#SilkyS/HelloWorld?v=1 in an <iframe> because it has its X-Frame-Options header set to DENY.
You can, however, embed the page embedded by that page, https://ca96c5e0-a1a8-4010-a7eb-cc3d7c86ad3b.id.repl.co/.

It related to the origins and your iframe tag url must be in the same origin.
Check this answer to similar question: Firefox blocks the loading of HTML iframe

Accessing iframe.contentWindow.document not working using postMessage()

My goal is to add css to the iframe content from the parent page. I have two different domains one rendering an iframe from the other, I'm using postMessage to bypass the same-origin policy issue however this doesn't seem to work as expected. When I try to console.log(iframe.contentWindow) I get an error in the console Uncaught DOMException: Blocked a frame with origin "http://parent.domain.com" from accessing a cross-origin frame.
iframe
<iframe
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
src="https://domain.with.iframe.content"
width="100%"
frameBorder="0"
id="iframe-1"
></iframe>
Page with iframe.
<script>
window.addEventListener('message', function(e) {
var iframe = document.getElementById("iframe-1");
console.log(e)
console.log(e.origin)
console.log(iframe)
console.log(iframe.contentWindow)
}, false);
</script>
Page that I'm iframing.
<script>
var body = document.body
body.onload = function resize() {
parent.postMessage(["hey"], "*");
}
</script>
</script>
From the console I can see that the message event listener is running, however this line console.log(iframe.contentWindow) throws the error. Any help will be much appreciated, thank you.

Adding an answer from my comments:
You can't access iframe.contentWindow from the parent frame, see SecurityError: Blocked a frame with origin from accessing a cross-origin frame
So you'll need to pass the CSS you need back and forth with postMessage.
Depending on how you get the CSS but assuming you have it as a string, you could send that string to the iframe using postMessage. Inside the iframe you could create a style tag, set the innerHTML of that tag to the CSS string and append it to the document head. Like in this article under Global Styles https://dev.to/karataev/set-css-styles-with-javascript-3nl5

Load website in first Iframe and its front end code in second Iframe

Just for the sake of learning Im asking this question.
I'm using 2 iframes
lets suppose I load a random website in Iframe1 Is it possible that its front end code is displayed in the 2nd Iframe dynamically/automatically.
Im talking about the code you see once you press CTRL+U on any webpage.
Please help

Loading any sites to iFrame
You can do it but not for all sites, cause some sites like google and stackoverflow blocks their loading to frames.
Getting any site content
You can`t do it, you can do it only if you iframe domain are the same as your site domain (Here is the description of policy same origin policy).
But
You can do some hacks, here is
solutions
Also here is fiddle that illustrate same origin policy exception. Use console to see it.
fiddle
Fiddle code
<iframe name="site_frame" id="site_frame" src="http://iherb.com">
</iframe>
<iframe id="code_frame">
<textarea id="code"></textarea>
</iframe>
document.getElementById('site_frame').onload = function () {
console.log("Frame loaded!");
var siteFrameDoc = getIFrameDocument(document.getElementById('site_frame')),
siteFrameHtml = siteFrameDoc.getElementByTagName('html');
wrapper = document.createElement('div');
wrapper.appendChild(siteFrameHtml.cloneNode(true));
var codeFrameDoc = getIFrameDocument(document.getElementById('code_frame'));
var textarea = codeFrameDoc.getElementById("code");
console.log(textarea);
textarea.value = wrapper.innerHtml;
};
function getIFrameDocument(iframe) {
return iframe.contentDocument || iframe.contentWindow.document;
}

Assitance getting elements from an iFrame using jQuery or javascript

I am clearly being stupid. Please see below and tell me where I am losing it :-(
Html layout
<div class="the-variables">
<span class="asking">156.25</span>
<span class="bidding">144.82</span>
</div>
iFrame Layout
<iframe id="livetick" style="overflow-y: hidden;" src="http://dev.aatsol.co.za/live-feed/" scrolling="no" seamless onload="window.parent.scroll(0,0);" height="370" width="370" frameborder="0">
<p>Your browser does not support iframes</p>
</iframe>
And this is my javascript attempt
jQuery( document ).ready(function($) {
var iframe = document.getElementById('livetick');
/* var innerDoc = iframe.contentDocument || iframe.contentWindow.document; */
var innerDoc = iframe.contentWindow.document.getElementsByClassName('asking');
//alert (innerDoc.innerHTML);
//alert (innerDoc);
console.log(innerDoc);
});
For some strange reasons I fail to pull the two values from within the provided spans. They are handled on a remote website fluctuate based on various factors. I simply want to pull them on my website in a iFrame and copy the two values fro inside the iFrame to a section on my website footer.
In short:
1. Get values inside iFrame
2. Copy exact values to a section on my website footer (using jQuery / javascript)

Based on the URL of your iframe, you're running into the Same Origin Policy, which prevents cross-origin access to the document. You can't access the DOM of a window that isn't from the same origin as the document you're trying to access it from.

Cross domain but control both domains: Set the height of an iframe per it's contents?

We have two domains, domain.com and sub.domain.com
On domain.com
<html>
<head>
<title>Main</title>
</head>
<body>
<h1>This is the parent</h2>
<iframe src="http://sub.domain.com/results.aspx"
width="100%" height="1px" id="iframe1">
</iframe>
</body>
</html>
Quesiton: How can we adjust the iframe height from 1px to it's real height (when the iframe loads)? As the user plays in the iframe, it's height can change, so I suspect it might be needed to hook it to some event.
Now I'm fully aware that cross scripting is prevented in the browser and that even subdomains (or different port numbers) constitute "cross-domain". However, we control both the domains so I'm looking for a good solution for this. We looked at window.postMessage which seems to be designed specifically for this but couldn't make it work.

Your case is simple because it's cross-scripting subdomains (not cross-scripting different domains). Just assign document.domain = "domain.com" in both your page and iframe.
For more information, check out:
Cross sub domain iframes and JavaScript and
How to communicate between frames?

What you're looking for is iframe message passing:
https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
In the parent page:
var iframe = document.getElementById('myIframe');
function resizeIframe(event){
if (event.origin !== "http://example.org"){
// We trust this message
iframe.setAttribute("style", "width:" + event.data + "px;");
}
}
window.addEventListener('message', resizeIframe, false);
In the child page:
function postParent(){
window.postMessage($(body).height(), 'http://parentdomain.org');
}
$(window).on('load', postParent);