JQuery in iFrame

Discussion Ask a question
,
1

I have put some code in a frame which works faultlessly in a test environment (opening file from computer in Safari).

Once it’s in the frame it just will not work on my Wix site.
The HTML element appears but the JQ will not work.

Thanks for the help in advance, Luke.

This is the code:

<!DOCTYPE html>

<html>

<head>

</head>



<body>

    <input id="name" type="text">

    <input id="check" type="button" value="Check">

 <script

  src="https://code.jquery.com/jquery-3.4.1.min.js"

  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="

  crossorigin="anonymous"></script>

<script type="text/javascript">





$(document).ready(function() {

  var names = ['vadim', 'thomas', 'tanya', 'timur', 'eve', 'kate', 'karen', 

'peter'];



  $('#check').click(function() {

    var name = $('#name').val();

    if (jQuery.inArray(name, names) != '-1') {

      alert(name + ' is in the array!');

    } else {

      alert(name + ' is NOT in the array...');

    }

  });

});



  </script>



</body>

</html>
2

You can’t use alert() in the html component.

3

Thanks for reply, would you please be able to tell me how to just make it print to the page instead. (i am not a coder so struggling a bit haha)

4

@timashton96 First you should move your import JQuery script to the head.

If you want to see something the iframe code is doing in preview mode, the best way is to put this code in your wix page onReady:

$w('#html1').onMessage((msg)=>{console.log(msg.data);}

and change alert inside the iframe to:

window.parent.postMessage(name + 'is in the array');

or the JQuery variation which in this case is actually more complex than pure JS:

$(window).post('message', name + 'is in the array');