Issue
I recently asked this question on SO, asking how to feed code into an iframe WITHOUT a file or url. This worked in simple cases, like <h1>Hello World</h1>, but in the long run, I want to implement three.js into these iframes. Here is how I tried adding to the iframe:
var iframe = document.getElementById("my-iframe");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.body.innerHTML = "<h1>Hello World</h1>";
This works fine, but now I try to create a very simple three.js scene, just to kick things off. Here is how I tried it:
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>\
`
Just a variable, sorry if this isn't the best way to do things. After defining this variable, I apply it the same way:
var iframe = document.getElementById("my-iframe");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.body.innerHTML = generatedCode; //Now using the variable instead of a heading
Why doesn't this work? Thanks!
Solution
Your generatedCode will produce error Unterminated template literal you need to escape/replace </script> in variable with <\/script>
because the variable start with <!DOCTYPE html><html> it better to write the iframe using iframeDocument.write(), becasuse the iframeDocument.body.innerHTML is to write in <body>
run on jsfiddle
let 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>`;
var iframe = document.getElementById("my-iframe");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.write(generatedCode);
iframeDocument.close();<iframe id="my-iframe"></iframe>Answered By - uingtea Answer Checked By - Gilberto Lyons (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.