Hi,
I would like to add javascipt code from my partner to use it in my site. The code looks like that
When i put it to HTML iframe i see green check, but i see nothing on my page. It’s blank.
I am not a programer so if you have some easy solution to my problem i will be very appreciated 
Well running just a script inside the html component won’t work I guess. I think you have to sorround it with proper html tags.
<html>
<head></head><body>
<script type="text/javascript" src="https://websiteadress"
charset="UTF-8"></script>
</body>
</html>
But what does the script do? What do you expect it to output?
Thank you for the answer… still it doesn’t work.
Sciprt contains some tools for the gem stones. With this tool client can change gem size, color, cut etc…
Is there any way to write you privet message on this forum?
I support people in the forum for free, all private sessions I do are paid ones so when I work at the forums this is what I do. I would make a html file locally on your computer and open that in a browser and make sure it works there. If it works there it should work in a html component. If it does not work locally it will not work in Wix either.
@andreas-kviby thanks for the answer.
The .html file works in the browser… but it doesn’t work in Wix site ;(
@marcin Let me try to expand on Andreas’ line of discussion. You say the .html file works in the browser. What html file are you talking about?
If you have an HTML file on your computer then what you need to do is open the file using a text editor (not a browser) and then select and copy all of the html file contents.
Then paste what you copy into the edit code panel of the htmlComponent.
If you need more help you really need to help us out by sharing a link to the page where you are getting your instructions on how to do this or share the html file contents in this post.
Otherwise we are simply guessing what the solution might be.
Good luck.
Steve
@stevendc thanks Steve for the explanation.
Regarding to the HTML component i did like you said and it’s the same result.
Here is the code… it will be easier
The instructions was:
Copy the code below to embed the tool(s) directly into your website
Hi Marcin:
OK I have reverse engineered your HTML.
There are a number of problems the main one is that you are hitting what is called a CORS iFrame restriction. Basically that is a security violation that occurs when you attempt to load, indirectly or without the correct credentials, a URL from a site that is not the one your code is running on. This is normally the case when you try to execute the js import in your HTML code.
Now having looked at the javascript that is loaded when your HTML file is loaded it essentially tries to create yet another iframe to build a new web page that is inserted above the <javascript …> code in your html.
What this javascript file does is manufacture a web page link that is loaded into the iFrame created by the javascript that looks like this:
https://4cs.gia.edu/interactive-4cs/standalone/cut.html
So to solve your problem we need to go back to Andreas’ suggestion and set the src property of your htmlComponent to this url like so:
$w('#html1').src = "https://4cs.gia.edu/interactive-4cs/standalone/cut.html";
Now you will need to size the iframe to the size you need to see the whole page but essentially this will get what you want.
Cheers
Steve
P.S. Here is the javascript code that is loaded. I have annotated the Script areas where the key URL components are determine using the comment string : “**** Steve:”
;(function () {
'use strict';
// Get the embedded <script> tag.
var tool_parent = document.getElementsByTagName('script');
if (tool_parent.hasOwnProperty(tool_parent.length - 1)) {
tool_parent = tool_parent[tool_parent.length - 1];
} else {
window.alert('No source script file was found.');
return;
}
// Alert if wrong <script> tag and move on.
if (!tool_parent.src.length || !tool_parent.src.match(/embed\.js/i)) {
console.log('There was a problem embedding the tool.');
return;
}
// Create new iframe on page.
var tool_frame = document.createElement('iframe');
tool_frame.style.width = '1px';
tool_frame.style.minWidth = '100%';
tool_frame.scrolling = 'no';
tool_frame.marginWidth = '0';
tool_frame.marginHeight = '0';
tool_frame.frameBorder = '0';
tool_frame.setAttribute('vspace', '0');
tool_frame.setAttribute('hspace', '0');
var tool_source = tool_parent.src.match(/^(?:http[s]?:\/\/)?(\/?[^/]+)/i).pop();
if (typeof tool_source !== 'string') {
tool_source = '4cs.gia.edu';
}
else{
tool_source = '4cs.gia.edu/interactive-4cs/';
}
// **** Steve: tool_source= '4cs.gia.edu/interactive-4cs/';
// Get value if tool is passed.
var standalone = '';
var internal = '';
var src_query_string = tool_parent.src.replace(/^[^?]+\??/, '').split('&');
// **** Steve: src_query_string = ['tool=cut'];
for (var pair in src_query_string) {
if (src_query_string.hasOwnProperty(pair)) {
var tool = src_query_string[pair].match(/tool=([^&]+)/i);
if (tool && tool.length) {
standalone = '/standalone/' + tool.pop() + '.html';
}
internal = src_query_string[pair].match(/internal=true/i);
}
}
// **** Steve: standalone = '/standalone/cut.html'
if (standalone.length === 0) {
tool_frame.style.outline = '1px solid #e9e9e9';
}
// Pass UTM codes to source for tracking.
var query_string = [internal];
query_string.push('embedURL=' + window.top.location.hostname);
query_string.push('embedPath=' + window.top.location.pathname);
query_string = encodeURI(query_string.join('&'));
// **** Steve: For Wix we will ignore the UTM codes as they are not necessary for this example
// **** Steve: query_string = "";
// Insert iframe on page.
tool_frame.src = 'https://' + tool_source + standalone + '?' + query_string;
// **** Steve: The url loaded into the iFrame is what we want...
// **** Steve: 'https://' + tool_source + standalone
// **** Steve: 'https://' + '4cs.gia.edu/interactive-4cs' + '/standalone/cut.html'
// **** Steve: https://4cs.gia.edu/interactive-4cs/standalone/cut.html
// tool_frame.src = ('https:' === window.top.location.protocol ? 'https://' : 'http://') + tool_source + standalone + '?' + query_string;
console.log("Tool Frame Source is: "+tool_frame.src)
tool_parent.parentNode.insertBefore(tool_frame, tool_parent);
// Respond to iframe resize messages.
function onMessage(event) {
var c = (tool_frame.contentWindow || tool_frame.contentDocument);
if (event.source !== c || typeof event.data !== 'string') {
return;
}
var tool_frame_data = JSON.parse(event.data);
tool_frame.height = '';
tool_frame.height = tool_frame_data.height;
}
if (window.attachEvent) {
window.attachEvent('onmessage', onMessage);
} else if (window.addEventListener) {
window.addEventListener('message', onMessage, false);
}
})();
Thank you Steve for the interested of my case.
Did I understand correctly that writing code in this way should work correctly?
Where did i make a mistake?
No you need to ignore your HTML code. My detailed explanation above was to show you that the HTML code you shared creates an iFrame and calculates the URL that needs to be added to the iFrame.
So the URL that it calculates is https://4cs.gia.edu/interactive-4cs/standalone/cut.html
You don’t need the rest of the javascript that creates an iFrame. Why? Well the htmlComponent is already an iFrame.
Inside the page code editor for your page you simply need to add this code:
$w.onReady(() => {
$w('#html1').src = "https://4cs.gia.edu/interactive-4cs/standalone/cut.html";
});
Steve
Thanks a lot.
Steve,
I am having the same problem with my wix site about not getting html code to work. I followed your instructions and then my widget worked but it has the code written above it. How do I get it to just post my widget and not the entire code? The code I am trying to embed is:
<script src='https://snapppt.com/widgets/widget_loader/2fa9e4d3-3cb4-45f9-bb27-0dc238fb8602/grid.js' defer class='snapppt-widget'></script>
Any help that you could give me on how to fix this issue would be great. I should note that if I just add the above script without the additional html coding that you provided on this forum for Marcin then nothing happens at all. Thanks for your time.
@stevendc i am trying to add the code
to my wix website page. however i dont think im in the correct spot. On the page i want the script to go for an interactive tool, i clicked the bar on the bottom labeled “Education Page Code” which gave me a entry box like the one above, however it says “Parsing error: unexpected token <”
can you please help, thank you.
natalie
i also tried to copy and paste the one you provided for marcin and it still did not work
