I am trying to create a webcomponent that includes the forge viewer. Im sadly running into an issue where the forge viewer fails to properly load the lmvworker and the allstrings.json
It looks like the viewer has problems loading them when used into a webcomponent: viewer3D.js:40122 GET https://stacksnippets.net/lmvworker.js 404 (Not Found)
The viewer is fetched from developer.api.autodesk.com
To properly see the error open the inspector.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Core</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.14/webcomponents-hi.js"></script>
<link rel="import" href="https://raw.githubusercontent.com/zedero/forge-webcomponent/master/bim.html">
</head>
<body>
<bim-viewer></bim-viewer>
</body>
</html>
Webcomponentjs still new to me, but manually loading lmvworker.js causes some problems. Can you try removing this line?
Related
I've been following the Font Awesome guides how to use their kits, but when I inserted this code at the end of my body tag, I get an error, and I can't use any icons.
<script src="https://kit.fontawesome.com/a4c00a89bc.js" crossorigin="anonymous"></script>
Here is the full HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="imgs/favicon.ico" />
<link rel="apple-touch-icon" href="imgs/logo192.png" />
<link rel="stylesheet" type="text/css" href="scss/main.css">
<title>My title</title>
</head>
<body>
<div>Facebook<i class="fab fa-facebook"></i></div>
<script src="https://kit.fontawesome.com/a4c00a89bc.js" crossorigin="anonymous"></script>
</body>
</html>
And here is the error message:
Access to script at 'https://kit.fontawesome.com/a4c00a89bc.js' from origin 'http://localhost:63342' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET https://kit.fontawesome.com/a4c00a89bc.js net::ERR_FAILED
Any idea?
It looks like JavaScript Debug server caused the problem, that I was using because of the Live Edit plugin. As I restarted the server, the script worked. Also, if I just opened the html file, it worked properly. But the problem always occur at first start of the JavaScript Debug server, when it opens up the browser.
A quick note: put the script rather between the head tag, because it inserts a stylesheet into the html file.
(I am using JavaScript Debug server in phpStorm)
I had the same problem. It turns out that I added domain restriction of my font awesome kit, which you can configure on the Font Awesome website. I added mydomain.com, while the correct way is to add *.mydomain.com to allow any subdomain in my website to use the font awesome script. The problem went away once I fixed the error.
You can check the domain setting of your kit in your Font Awesome account to see if it is the cause of the CORS blocking problem.
I created a simple html file which should display svg image:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<img src="D:/Angular/hello-world/node_modules/bootstrap-icons/icons/star.svg">
</body>
</html>
It displays fine in Google Chrome but Firefox displays nothing at all but that's another issue...
When I'm running exactly the same code but in an Angular project inside index.html Google Chrome shows the "couldn't load" image. Does somebody know why in a pure html file it works but when running from Angular project it stops? And why firefox displays nothing?
For an Angular app, images need to be in a specific folder for it to be able to find said images. Move (or copy) the image to src/assets and use the path assets/star.svg.
CSS is perfectly loading on the offline webpage (localhost) but on the live website, CSS is not loading.
I am using hosting and domain from the biz.nf website.
I used bootstrap 4 on this website.
My index.html head code:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://www.site.c1.biz/css/style.css" media="screen" />
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
I saw your website in the inspect mode
its showing style.css is 403 forbidden in the network tab
Check with it
you can check here ERROR 403 in loading resources like CSS and JS in my index.php
Maybe you try using relative css path or check your webserver configuration, because loading the CSS file returned a 403 forbidden error code.
Finnaly I figured it out,
The problem was caused because my images was not in the same directory as of index.html
I tried many things.
Webpage inspect was throwing some error like - anime.min.js error in front of img name which was completely useless.
Many said it as a broken img but it's a different issue.
I have an entire React application that I am hosting on AWS. I want to embed this application in to another non React site. Currently I have it iframed in and it works fine.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
</head>
<body>
<iframe src="https://testlink.cloudfront.net"></iframe>
</body>
</html>
I have seen examples in the React docs around implementing individual components without iframes but nothing around entire hosted applications.
Idealy I will be able to do something like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
</head>
<body>
<div="app"></div>
<div="app2"></div>
</body>
</html>
What's the best approach to do this or am I best to just deal with iframes?
I had to integrate multiple react apps into a cake php framework.
Place the final bundle in webroot of the hosted site e.g under /react.
Then just include the final bundled script tag in the html.
You will have to handle the routing to the app on the hosted site.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8">
...
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="ReactAppDiv"></div>
<script type="text/javascript" src="/react/main.js"></script>
</body>
</html>
I am really humbled now. I have been trying to get my application cached in IE11 browser with no luck.
I will be really thankful if some one tell me whats going wrong. I did lot of reading whole day , but couldn't find what is causing the issue.
Issue:
My offline application gets cached correctly based on my manifest file in Chrome and Firefox. But the app doesn't get cached in IE11 (which is the only IE that I have). I have no clue what is going wrong.
My code:
manifest.appcache
CACHE MANIFEST
#V1.0
CACHE:
/FormsOffline/index.html
NETWORK:
*
index.html
<!DOCTYPE html>
<html ng-app="app" lang="en" manifest="manifest.appcache">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Forms</title>
<link href="/FormsCommon/vendor/css/all.css" rel="stylesheet" />
<link href="/FormsCommon/assets/css/main.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
When I run the index.html page, i get the following erro in the IE11 console:
Creating AppCache with manifest: 'http://127.0.0.1:7101/FormsOffline/manifest.appcache'.
AppCache Fatal Error
Am building my offline application using html5, angularjs and the server is Oracle weblogic.