I recently posted a question on Stack Overflow inquiring about how to input code into an iframe without using a file or URL. While I was successful with simple cases like <h1>Hello World</h1>, my ultimate goal is to integrate three.js into these iframes. Below is the approach I took to add code to the iframe:
var iframe = document.getElementById("my-iframe");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.body.innerHTML = "<h1>Hello World</h1>";
While this method worked flawlessly, my next step was to create a very basic three.js scene just as a starting point. Here's the snippet of code I attempted:
generatedCode = `\
<!DOCTYPE html>\
<html>\
<head>\
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js" ></script>\
</head>\
<body style="margin: 0;">\
<script>\
var scene = new THREE.Scene();\
var camera = new THREE.PerspectiveCamera(90, window.innerWidth/window.innerHeight, 0.1, 1000);\
\
var mesh = new THREE.Mesh(\
new THREE.BoxGeometry(1,1,1),\
new THREE.MeshBasicMaterial({color:0xff0000})\
);\
\
scene.add(mesh);\
\
camera.position.z = -5;\
camera.lookAt(0, 0, 0);\
\
var renderer = new THREE.WebGLRenderer();\
renderer.setSize(window.innerWidth, window.innerHeight);\
document.body.appendChild(renderer.domElement);\
\
function animate(){\
requestAnimationFrame(animate);\
renderer.render(scene, camera);\
}\
\
animate();\
</script>\
</body>\
</html>\
`
After defining this variable, I attempted to apply it in the same manner as before:
var iframe = document.getElementById("my-iframe");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.body.innerHTML = generatedCode; //Now utilizing the variable instead of a heading
However, this did not yield the desired results. Any insights on why this didn't work would be greatly appreciated. Thank you!