-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathblablabla.html
More file actions
26 lines (26 loc) · 13.5 KB
/
Copy pathblablabla.html
File metadata and controls
26 lines (26 loc) · 13.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
<title>Title</title>
<script>
function myFunction() {
console.log("clickk");
let parametersString = document.querySelector("div[data-component-class='Product3DViewerModal']").attributes["data-component-parm"].value;
console.log(parametersString);
let data = JSON.parse(parametersString);
console.log(data);
let targetWindow = document.querySelector("iframe");
console.log(targetWindow);
targetWindow.contentWindow.postMessage({
command: "start",
parms: data
}, 'https://3bb1-2a02-1811-b7ba-e900-7db7-c07f-380c-323f.ngrok.io'); // Use target host.
}
</script>
</head>
<body>
<div data-component-class="Product3DViewerModal" data-component-parm="{"ProductName":"JI 24-183-1100 Roof-tile","FileUri":"https://api.clfyj5-jorisiden1-p1-public.model-t.cc.commerce.ondemand.com/medias/JRI-JI-45-333-1000-Dak.fbx?context=bWFzdGVyfHJvb3R8NzkxNjh8YXBwbGljYXRpb24vb2N0ZXQtc3RyZWFtfGgwNi9oM2IvODkwMTIxMjc2NjIzOC9KUklfSkkgNDUtMzMzLTEwMDAgRGFrLmZieHxlYzU3OGI5NWQ0MDBiNzZhZDMwOGIzM2I2ZWJmZmFmNWQzYmMzYjFlMDBlNjJiMDhjMTM1YzhkYWFlZTZkNTI2","TextureRootPath":"https://we-jor-dev-digital-asphead-web.azureedge.net/images/textures","Coatings":[{"Description":"Grandemat 40 µ","LongDescription":"The Grandemat is a thermoset polyester paint. The surface treatment and paint are free of hexavalent chromium and heavy metals. It is mostly used on external buildings & general industry applications: tiles, cladding etc.","Colours":[{"Code":"69","Description":"RAL 8004 mat","HexCode":"#8E402A","LongDescription":"Copper brown"},{"Code":"71","Description":"RAL 7024 mat","HexCode":"#686C5E","LongDescription":"Concrete grey"},{"Code":"72","Description":"RAL 9005 Mat","HexCode":"#0A0A0A","LongDescription":"<p>Jet black</p>"}],"Images":[{"AltText":"07","Format":"superZoom","ImageType":"PRIMARY","Url":"/medias/JRI-Cloudy-Durable-Essential-Grandemat-Ultra-3D-EN-1200Wx1200H.jpg?context=bWFzdGVyfHJvb3R8NDQwNDV8aW1hZ2UvanBlZ3xoYTQvaGU3Lzg5MDU2NTUxODk1MzQvSlJJX0Nsb3VkeS1EdXJhYmxlLUVzc2VudGlhbC1HcmFuZGVtYXQtVWx0cmFfM0RfRU5fMTIwMFd4MTIwMEguanBnfGExMWQ4Y2E3YmFjMTk5MmIwMTYyMGU3MTAxOTU4YTk2ZjFjNGIwYjMzNDA1N2ZhZDllMGQ5ZjVkM2ZlYmQ3Y2E","Width":null,"Height":null},{"AltText":"07","Format":"zoom","ImageType":"PRIMARY","Url":"/medias/JRI-Cloudy-Durable-Essential-Grandemat-Ultra-3D-EN-515Wx515H.jpg?context=bWFzdGVyfHJvb3R8MTM5MTh8aW1hZ2UvanBlZ3xoYjYvaGVhLzg5MDU2NTUyNTUwNzAvSlJJX0Nsb3VkeS1EdXJhYmxlLUVzc2VudGlhbC1HcmFuZGVtYXQtVWx0cmFfM0RfRU5fNTE1V3g1MTVILmpwZ3w1OTNhNWM0MzE3MGY1NWQ0Mzc0NjlhZTU1OTcyMDdjM2ViMGZhZGYyNjYxYWE1ZjhmNjhlZmRmMDNjZjgxZTk5","Width":null,"Height":null},{"AltText":"07","Format":"product","ImageType":"PRIMARY","Url":"/medias/JRI-Cloudy-Durable-Essential-Grandemat-Ultra-3D-EN-300Wx300H.jpg?context=bWFzdGVyfHJvb3R8NjU3N3xpbWFnZS9qcGVnfGg3NS9oZWUvODkwNTY1NTM4NjE0Mi9KUklfQ2xvdWR5LUR1cmFibGUtRXNzZW50aWFsLUdyYW5kZW1hdC1VbHRyYV8zRF9FTl8zMDBXeDMwMEguanBnfGY5OTI3NmMxOTljOGQ0ZmU4ZTQzZjc0YzVmNGU4ZjhkZGRmMzJhYWM2MmE1MThiOWJmZThjOWFjZGQ3M2E1MGI","Width":null,"Height":null},{"AltText":"07","Format":"thumbnail","ImageType":"PRIMARY","Url":"/medias/JRI-Cloudy-Durable-Essential-Grandemat-Ultra-3D-EN-96Wx96H.jpg?context=bWFzdGVyfHJvb3R8MTU3OHxpbWFnZS9qcGVnfGg4Ni9oZjEvODkwNTY1NTQ1MTY3OC9KUklfQ2xvdWR5LUR1cmFibGUtRXNzZW50aWFsLUdyYW5kZW1hdC1VbHRyYV8zRF9FTl85Nld4OTZILmpwZ3wxOGZiM2E1MDA2NGE3N2I0YmIzMTIxNmY2NGNmODM4MGI3Y2NlN2E1MmFiZTk5NzE5MTZkYmEwNjU0OTZlNDMz","Width":null,"Height":null},{"AltText":"07","Format":"original","ImageType":"PRIMARY","Url":"/medias/JRI-Cloudy-Durable-Essential-Grandemat-Ultra-3D-EN.jpg?context=bWFzdGVyfHJvb3R8OTQ0MzB8aW1hZ2UvanBlZ3xoZjYvaGU2Lzg5MDU2NTUxMjM5OTgvSlJJX0Nsb3VkeS1EdXJhYmxlLUVzc2VudGlhbC1HcmFuZGVtYXQtVWx0cmFfM0RfRU4uanBnfDY2NjRiYjVmNzc0NTRmNTA2NjQ5N2JhZjNiZDA2OGYxNzRlODI5YjZlYTBlMzI4MTlhZGJiOGJiYzJkYzc3NjI","Width":null,"Height":null}]},{"Description":"HPS 200 Ultra® 200 µ","LongDescription":"<p>HPS200 Ultra&reg; has been developed to perform in demanding environments &ndash; both external and internal.</p>","Colours":[{"Code":"112","Description":"Ivy","HexCode":"#384332","LongDescription":null},{"Code":"113","Description":"Alaska Grey","HexCode":"#7a888f","LongDescription":null},{"Code":"114","Description":"Pure Grey","HexCode":"#a0a0a2","LongDescription":null},{"Code":"51","Description":"White","HexCode":"#F8F8F8","LongDescription":null},{"Code":"52","Description":"Hamlet","HexCode":"#D6D6CE","LongDescription":null},{"Code":"53","Description":"Mushroom","HexCode":"#BBB497","LongDescription":null},{"Code":"54","Description":"Albatross","HexCode":"#e0d9d5","LongDescription":null},{"Code":"55","Description":"Goosewing Grey","HexCode":"#B9BCB3","LongDescription":null},{"Code":"56","Description":"Merlin Grey","HexCode":"#45525B","LongDescription":null},{"Code":"57","Description":"Anthracite","HexCode":"#303030","LongDescription":null},{"Code":"58","Description":"Anthracite Mat","HexCode":"#333333","LongDescription":null},{"Code":"59","Description":"Black","HexCode":"#000000","LongDescription":null},{"Code":"60","Description":"Terracotta","HexCode":"#833C26","LongDescription":null},{"Code":"61","Description":"Burano","HexCode":"#663333","LongDescription":null},{"Code":"62","Description":"Van Dyke Brown","HexCode":"#5C4138","LongDescription":null},{"Code":"63","Description":"Ocean Blue","HexCode":"#005c75","LongDescription":null},{"Code":"64","Description":"Sargasso","HexCode":"#154261","LongDescription":null},{"Code":"65","Description":"Heritage Green","HexCode":"#477745","LongDescription":null},{"Code":"66","Description":"Olive Green","HexCode":"#4f5a32","LongDescription":null},{"Code":"67","Description":"Juniper Green","HexCode":"#27473a","LongDescription":null},{"Code":"68","Description":"Moorland Green","HexCode":"#B5D67B","LongDescription":null}],"Images":[{"AltText":"02","Format":"superZoom","ImageType":"PRIMARY","Url":"/medias/JRI-HPS-200-Ultra-3D-EN-1200Wx1200H.jpg?context=bWFzdGVyfHJvb3R8NTE2NzJ8aW1hZ2UvanBlZ3xoNDkvaDNlLzg5MDU2NTczNTIyMjIvSlJJX0hQUy0yMDAtVWx0cmFfM0RfRU5fMTIwMFd4MTIwMEguanBnfGMxNmRiNTUwYTQ1MTcyNjEyYzY3OGYzMDQyNDQ2OWQ2YTcxM2E1NTNkODc1ZTI0MzkwZDQ0NmQwY2MwY2RlYzE","Width":null,"Height":null},{"AltText":"02","Format":"zoom","ImageType":"PRIMARY","Url":"/medias/JRI-HPS-200-Ultra-3D-EN-515Wx515H.jpg?context=bWFzdGVyfHJvb3R8MTY2OTB8aW1hZ2UvanBlZ3xoNGMvaDNiLzg5MDU2NTc0MTc3NTgvSlJJX0hQUy0yMDAtVWx0cmFfM0RfRU5fNTE1V3g1MTVILmpwZ3w5MmQ5MzFiMDQ1OTA3OWNmNWRkYmIyYjE5ZWY0MWNhNjY1YjQzNDgxMDI1MmQyZjhmOTFiOThhNzMxOTM1ZjEx","Width":null,"Height":null},{"AltText":"02","Format":"product","ImageType":"PRIMARY","Url":"/medias/JRI-HPS-200-Ultra-3D-EN-300Wx300H.jpg?context=bWFzdGVyfHJvb3R8NzYzMnxpbWFnZS9qcGVnfGg4Yy9oMzcvODkwNTY1NzU0ODgzMC9KUklfSFBTLTIwMC1VbHRyYV8zRF9FTl8zMDBXeDMwMEguanBnfGRhZjYwOTA1ZjBlMjJhMjllYzFlOWYzMjA1Njg4MTNhYjBhNzg3M2RkZGMyYTZiNTE2NTEyY2YyZDg5NjkyODc","Width":null,"Height":null},{"AltText":"02","Format":"thumbnail","ImageType":"PRIMARY","Url":"/medias/JRI-HPS-200-Ultra-3D-EN-96Wx96H.jpg?context=bWFzdGVyfHJvb3R8MTY4MXxpbWFnZS9qcGVnfGg3Yi9oMzQvODkwNTY1NzYxNDM2Ni9KUklfSFBTLTIwMC1VbHRyYV8zRF9FTl85Nld4OTZILmpwZ3wyYTRjYzBkNWZjNjRlYzViNzQzZWU0YTM5MDQ4OTU1OTJiOWVkMDIzMDY3ZTg1YTI3MmJjOTNkY2RmZmQ0ZWE1","Width":null,"Height":null},{"AltText":"02","Format":"original","ImageType":"PRIMARY","Url":"/medias/JRI-HPS-200-Ultra-3D-EN.jpg?context=bWFzdGVyfHJvb3R8MTEyOTg4fGltYWdlL2pwZWd8aDViL2g0MS84OTA1NjU3Mjg2Njg2L0pSSV9IUFMtMjAwLVVsdHJhXzNEX0VOLmpwZ3w5N2IzMDkxNDIyMmIwMzkzY2RkODViOTEwMTQ5MmQyOTg5NDNkZGZhNDg4NTk5ZDIzYTdlZjlhZmI5ZDZhOWVl","Width":null,"Height":null}]},{"Description":"Cloudy 35 µ","LongDescription":"External use: coating specifically designed for roof tiles.","Colours":[{"Code":"73","Description":"Residential","HexCode":"#6C3F2A","LongDescription":null}],"Images":[{"AltText":"08","Format":"superZoom","ImageType":"PRIMARY","Url":"/medias/JRI-Cloudy-Durable-Essential-Grandemat-Ultra-3D-EN-1200Wx1200H.jpg?context=bWFzdGVyfHJvb3R8NDQwNDV8aW1hZ2UvanBlZ3xoYTQvaGU3Lzg5MDU2NTUxODk1MzQvSlJJX0Nsb3VkeS1EdXJhYmxlLUVzc2VudGlhbC1HcmFuZGVtYXQtVWx0cmFfM0RfRU5fMTIwMFd4MTIwMEguanBnfGExMWQ4Y2E3YmFjMTk5MmIwMTYyMGU3MTAxOTU4YTk2ZjFjNGIwYjMzNDA1N2ZhZDllMGQ5ZjVkM2ZlYmQ3Y2E","Width":null,"Height":null},{"AltText":"08","Format":"zoom","ImageType":"PRIMARY","Url":"/medias/JRI-Cloudy-Durable-Essential-Grandemat-Ultra-3D-EN-515Wx515H.jpg?context=bWFzdGVyfHJvb3R8MTM5MTh8aW1hZ2UvanBlZ3xoYjYvaGVhLzg5MDU2NTUyNTUwNzAvSlJJX0Nsb3VkeS1EdXJhYmxlLUVzc2VudGlhbC1HcmFuZGVtYXQtVWx0cmFfM0RfRU5fNTE1V3g1MTVILmpwZ3w1OTNhNWM0MzE3MGY1NWQ0Mzc0NjlhZTU1OTcyMDdjM2ViMGZhZGYyNjYxYWE1ZjhmNjhlZmRmMDNjZjgxZTk5","Width":null,"Height":null},{"AltText":"08","Format":"product","ImageType":"PRIMARY","Url":"/medias/JRI-Cloudy-Durable-Essential-Grandemat-Ultra-3D-EN-300Wx300H.jpg?context=bWFzdGVyfHJvb3R8NjU3N3xpbWFnZS9qcGVnfGg3NS9oZWUvODkwNTY1NTM4NjE0Mi9KUklfQ2xvdWR5LUR1cmFibGUtRXNzZW50aWFsLUdyYW5kZW1hdC1VbHRyYV8zRF9FTl8zMDBXeDMwMEguanBnfGY5OTI3NmMxOTljOGQ0ZmU4ZTQzZjc0YzVmNGU4ZjhkZGRmMzJhYWM2MmE1MThiOWJmZThjOWFjZGQ3M2E1MGI","Width":null,"Height":null},{"AltText":"08","Format":"thumbnail","ImageType":"PRIMARY","Url":"/medias/JRI-Cloudy-Durable-Essential-Grandemat-Ultra-3D-EN-96Wx96H.jpg?context=bWFzdGVyfHJvb3R8MTU3OHxpbWFnZS9qcGVnfGg4Ni9oZjEvODkwNTY1NTQ1MTY3OC9KUklfQ2xvdWR5LUR1cmFibGUtRXNzZW50aWFsLUdyYW5kZW1hdC1VbHRyYV8zRF9FTl85Nld4OTZILmpwZ3wxOGZiM2E1MDA2NGE3N2I0YmIzMTIxNmY2NGNmODM4MGI3Y2NlN2E1MmFiZTk5NzE5MTZkYmEwNjU0OTZlNDMz","Width":null,"Height":null},{"AltText":"08","Format":"original","ImageType":"PRIMARY","Url":"/medias/JRI-Cloudy-Durable-Essential-Grandemat-Ultra-3D-EN.jpg?context=bWFzdGVyfHJvb3R8OTQ0MzB8aW1hZ2UvanBlZ3xoZjYvaGU2Lzg5MDU2NTUxMjM5OTgvSlJJX0Nsb3VkeS1EdXJhYmxlLUVzc2VudGlhbC1HcmFuZGVtYXQtVWx0cmFfM0RfRU4uanBnfDY2NjRiYjVmNzc0NTRmNTA2NjQ5N2JhZjNiZDA2OGYxNzRlODI5YjZlYTBlMzI4MTlhZGJiOGJiYzJkYzc3NjI","Width":null,"Height":null}]}]}">
<iframe src="https://3bb1-2a02-1811-b7ba-e900-7db7-c07f-380c-323f.ngrok.io/nl-nl/product3dviewer?productName=JI%2045-333-1000%20Dak" width="800" height="600"></iframe>
</div>
<button onclick="myFunction()">Click me</button>
</body>
</html>