I wanted to load a survey widget in the react project, where I create and execute the script in the head after dom gets loaded. But it is unable to generate its poll HTML.
Here is react demo in codesandbox
If I load the same script inside the specific element in the body without react env it works, here it's demo in jsbin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Polldaddy Title</h1>
<div id="pollDaddyInfo">
<p>Poll should generate below this statememt</p>
<script charset="utf-8" src="https://static.polldaddy.com/p/10962229.js"></script>
</div>
<h1>Polldaddy End</h1>
</body>
</html>
Help me to identify what could possibly go wrong?
There is nothing wrong with your implementation in either scenario (i.e. with and without react environment).
Actually, in react environment you're loading the script which is async operation and an script that is loaded asynchronously cannot write on the document with document.write which is happening here
For supporting my argument here is another thread on stack overflow
Related
I was trying to export an angular element to use it in an arbitrary non framework project. You can export everything but nothing really happens when you import the script. But if you follow some guides out there they use a application instead it works, but it is basically a whole angular app running in a webcomponent wrapper. I am trying to bring angular packages and have it loaded as a library, not sure it is even possible.
ex1: https://medium.com/#smarth55/angular-elements-use-them-everywhere-including-your-angular-app-697f8e51e08d
ex2: https://medium.com/monstar-lab-bangladesh-engineering/angular-element-how-to-use-angular-components-in-react-vue-js-93757c92357b
When I exported a similar sample but from a library I can use it within any other angular app. Just by adding CUSTOM_ELEMENTS_SCHEMA. But importing the custom element to any non framework project nothing happens, the script is loaded but the custom element is blank. Are there extra steps to be able to use angular elements outside of angular that are exported from a lib? I would like to avoid custom builders like ngx-build-plus.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/rxjs#6.5.4/bundles/rxjs.umd.min.js"></script>
<script src="https://unpkg.com/#angular/core#9.1.13/bundles/core.umd.js"></script>
<script src="https://unpkg.com/#angular/elements#9.1.13/bundles/elements.umd.js"></script>
<script src="/my-lib-element/dist/my-lib-elem/bundles/my-lib-elem.umd.js"></script>
</head>
<body>
<!-- script runs and is imported without errors but the element below does nothing -->
<my-elem-cpt></my-elem-cpt>
<!-- and yes the name is correct but it seems the lib never registers the element in the browser -->
</body>
</html>
Does anyone have any clue if this possible?
Recently I deployed an app to production, when I checked after some days in Google SEO, It's only showing index.html only in the rendered cached snapshot,
The website has so many pages, so it won't be the easy task to convert app to next JS, can anyone help me, how can I resolve the issue?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body onload="myFunction()">
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div class="main-wrapper" id="root">
<div id="loader"></div>
</div>
</body>
</html>
Thanks
I am working on a project where I have to add external HTML files as a header and footer in the main (Index.html) page. I tried below script, but it didn't work
<!DOCTYPE html>
<html lang="en">
<head>
<title>sample test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#header1').load("mainheader.html");
});
</script>
</head>
<body>
<div id="header1"></div>
</body>
</html>
You can use iframe tag to load another html file or url.
<iframe src="your-html-route/another.html"></iframe>
Use JavaScript and work with components. Then you can work with modules to import or export a component and add HTML with
document.queryselector('#header').innerHTML = '<header>content</header>';
PHP is better for such a thing if you ask me. Make you header and footer in another .php file and include them on every page where you want use them.
Your script $('#header1').load("mainheader.html"); is correct. The fact is that the load() method (just like ajax) works exclusively on the SERVER. In order to load an external page to your tag using the load() method, you need to put your project on the server, or deploy a local server on your computer. There are many programs for this, for example: OpenServer, Denwer, WampServer, XAMPP, etc. I advise you to use OpenServer. It's free and easy to use. After you deploy your local server, you push your project to your server and the load() method will load your external html file.
If it's only a short bit of code then you could use this:
<pre>
<code>
HTML code goes
here.
</code>
</pre>
I am new to JS. I made a simple Snake game using vanilla JS in VS Code. There is minimal CSS in the code so I put that in the html.
When I open the index.html from VS Code with Live Server (http://127.0.0.1:5500/) it works fine.
But when I open it from the file explorer (file:///D:/Prog/Javascript/VanillaJS_projects/Snake/index.html) only the html gets loaded, no Snake and Food pieces appear. And the same happens if I try to open it with htmlpreview.github.io
This is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake</title>
<script src="game.js" defer type="module"></script>
<style>
...
</style>
</head>
<body>
<div id="game-board"></div>
</body>
</html>
It doesn't matter what browser I use, I get the same result.
What is the difference? Why won't it load properly?
You browsers honor Content Security Policy.
If you open file:/// URLs, you may think of your browser as a poor man's file viewer.
I'm new to javascript and trying to add this http://codepen.io/jklm313/pen/EarFd great map scrolling effect to my site. Css anf HTML read fine, but the js part doesn't want to work. Even if I put the js code in my html. This is the very typical beginning of my html:
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"/>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
I've searched for clues, but I can't seam to find the issue, is the code outdated or should I add something more? Thanks in advance
Test and make sure you are getting the js file loaded into the page. One method would be to place at the top of the script.js file :
alert('loaded');
If you get the alert box then you you have the correct path. If not then you know it is likely a path issue. You may need to make sure your file is in the same directory or else specify the directory in the src
I just glanced at the link and notice it is using the jquery library. Go to jquery.com to learn how to include that js file as well