I can't seem to cache my JS files.
A simple test:
index.html
<iframe src="iframe.html" sandbox="allow-scripts"></iframe>
iframe.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src s3.objectstorage.com;" />
</head>
<body>
<div id="root"></div>
<script src="http://s3.objectstorage.com/blah.js"></script>
</body>
</html>
If I change the sandbox attribute to include allow-same-origin, caching begins to work. However, I will be loading untrusted JS files, so I cannot allow that.
What are my options, so that my JS files are cached?
Update 1
Looks like I might be forced to download my raw JS from parent into an html blob, then reference the blob url for the iframe. Doesn't seem elegant, but will attempt tomorrow.
Update 2
There does not seem to be an adequate solution for loading within the iframe. I had to generate an html file with the script injected. Then, I load the html file in the iframe src. This does a disk cache, which seems to be sufficient for my purposes, and keep the iframe security.
Related
Normally in production and development using webpack this works fine. But when I attach the react code to just a regular HTML it doesn't mount itself. Why?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,width=device-width" />
<title>Sit</title>
</head>
<body>
<div id="modal-hook"></div>
<div id="backdrop-hook"></div>
<div id="root">444</div>
<script>
// Copy pasted React bundle here
</script>
</body>
</html>
A simple React app would load from html page. Check this example.
Whereas a full fledged app not only need just react bundle files. You should add all it's necessary dependencies like chunk/css/vendor files with all the required polyfills. And the main bundle file might be having relative file references with in that.
After all it's a set of JS files after bundling the code. If you add all it's necessary dependencies in the correct format, it will load without any issues.
I am currently having trouble understanding how gh-pages functions with file communication.
I currently have two files in my gh-pages branch on my github: bundle.js and index.html. When running this locally, index.html has access to bundle.js by moving through file paths. When running this online I have an issue getting index.html to be able to access bundle.jscorrectly.
1st attempt: I found the raw text through the URL: https://raw.githubusercontent.com/.... Unfortunately this does not work because there is a MIME type error.
2nd attempt: I found that there is another source for raw text that doesn't have the MIME type error, the URL is: https://cdn.rawgit.com/.... Unfortunately this does not work because cdn.rawgit.com does not update itself.
3rd attempt: I have found that I can use the same method as my 2nd attempt, but I can use a specific commit to access the correct cdn.rawgit.com/.../<commit path>. This seems to make things much more difficult because I would have to update my index.html every time I want to update the page. This also doesn't seem possible because how would I know the commit # before I commit it?
The relevant code is the line <script src = "https://cdn.rawgit.com/NumaK...">.
I can't figure out how my gh-pages website is supposed to be using the correct version of bundle.js:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<title>Numa Karolinski</title>
</head>
<body>
<div id="root"></div>
<noscript>
Hello There. Code can be found in the "root" folder above ^^^ !
</noscript>
<script src="https://cdn.rawgit.com/NumaKarolinski/PersonalWebsite/
websiteVersion1/dist/bundle.js"></script>
</body>
</html>
In your index.html, replace :
<script src="https://cdn.rawgit.com/NumaKarolinski/PersonalWebsite/websiteVersion1/dist/bundle.js"></script>
<script type="text/javascript" src="C:\Users\numak\Desktop\MyWebsite\dist/bundle.js"></script></body>
by
<script src="bundle.js"></script>
My wordpress home page has an embed video from youtube, I would like to change this embed video dynamically, without needing to edit my wordpress settings.
I tried to create a custom webpage redirecting to my video, so all I would need to do e run a script to change this page's URL, but it's not working, any clue on how to fix it?
I used to following code to redirect:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="1;url=http://https://www.youtube.com/watch?v=Eho8HDtkCiU">
<script type="text/javascript">
window.location.href = "http://https://www.youtube.com/watch?v=Eho8HDtkCiU"
</script>
<title>Page Redirection</title>
</head>
<body>
<!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
If you are not redirected automatically, follow the <a href='http://https://www.youtube.com/watch?v=Eho8HDtkCiU'>link to example</a>
</body>
</html>
Instead of redirecting them to the link, why don't you download the video using a YouTube to MP4 converter online, then keep that in the FTP of the WordPress. Then, perhaps you can use the video tag to show the MP4 file.
I was following a jQuery tutorial and part of it was to use something that took a long time to load, such as iframes. I can't get iframes to work by themselves, in the following only w3schools works. What is going on?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>This is a test</title>
</head>
<body>
<p>Hello.</p>
<p>
<iframe src="http://www.google.com"></iframe>
<iframe src="http://www.stackoverflow.com"></iframe>
<iframe src="http://www.w3schools.com"></iframe>
<iframe src="http://www.yahoo.com"></iframe>
<iframe src="http://www.reddit.com/"></iframe>
</p>
<p>Goodbye</p>
</body>
</html>
Are there any other easy ways to have something take a long time to load in a HTML document? I tried using large images but it's a nuisance to download many of them and they get cached after first time.
The reason for this is, that Google/Satckoverflow is sending an "X-Frame-Options: SAMEORIGIN" response header. (You can set this thing either in IIS or in Page Header) This option prevents the browser from displaying iFrames that are not hosted on the same domain as the parent page.
The X-Frame-Options response header
What is wrong with Chrome? I want to develop just a single html page. Without any server. Just one page. I know that I need web-server for using that page. But I need to just create a short simple html page with linked js and css files. And I can't do this, because chrome is too smart and I get the same error from chrome:
Not allowed to load local resource
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>ACAB</title>
<script type='text/javascript' src="./data_statistic.js"></script>
....