JQuery works on OBS but not on browser

Question

I'm having issues with JQuery. If I use it in an HTML page, I can get it to work perfectly only if I then view the page via OBS (the streaming platform, yes). If I open that same page via a browser it won't work.

Example: this is test.html. It's located in the same folder as jquery-3.5.1.min.js and test2.html

<html>
    
<head>

    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
    
    <script>
        $(document).ready(function(){
            $('#asd').load("test2.html");
        });
    </script>
    
</head>

<body bgcolor="white">

    <div id="asd">
    </div>

</body>
</html>

This is test2.html

<html>

<head>
</head>

<body>
    
    asdhasdhashdashdhasdhasdhasdhasdhashdashd asdh asdha sdh asdh asdh asdh asdh asdh asdhds ahsd sdha sd
    
</body>

</html>

This is what I see, for instance, on Firefox:

This is what I see on OBS:

I tried to open it through other browsers (Edge, Opera) and that's the same.

I tried to do an "Hello World" via JQuery and it actually works, so I'm really not sure what is missing at this point:

<html>

<head>

    <title>jQuery Hello World</title>

    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>

</head>

<body>

    <script type="text/javascript">

    $(document).ready(function(){
        $("#msgid").html("This is Hello World by JQuery");
    });

</script>

This is Hello World by HTML

<div id="msgid">
</div>

</body>
</html>

Result:

You're making an AJAX request to a `file://` URL which is not allowed for security reasons. For that to work you'll need to run the site on a webserver, either local or remote — Rory McCrossan, Oct 22 '20 at 11:27
Open your console, it's telling you what's wrong. `Access to XMLHttpRequest at 'file:///D:/Temp/test2.html' from origin 'null' has been blocked by CORS policy`. test2.html can't be loaded this way, you need to serve it. That's why it's working online and not from your filesystem. — Jeremy Thille, Oct 22 '20 at 11:29
@evolutionxbox: two actually. "The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol" and "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/Users/rapto/OneDrive/Desktop/test2.html. (Reason: CORS request not http)". — il mietitore, Oct 22 '20 at 11:29
@RoryMcCrossan So basically this won't ever work from a browser, and it works on OBS because it runs on a virtual server? — il mietitore, Oct 22 '20 at 11:30
It will work in a browser locally if you serve the files with a local web server. But not directly from your file system. — Jeremy Thille, Oct 22 '20 at 11:31

JQuery works on OBS but not on browser

0 Answers0