I'm using this code to change dynamically the iframe URL and it works well when I'm using "https://www.icqmail.com/" URL but when I using this URL "https://datastudio.google.com/embed/reporting/1se-9ZRSukdgQUiRqYTSjT8nFLTV0v8Uq/page/y5MR" data studio embedded I got 404.
When I changed the iframe src to be equal to URL like this src="https://www.icqmail.com/" both sites are working well.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="mask-icon" href="https://assets-cdn.github.com/pinned-octocat.svg" color="#000000">
<link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
<style>
body { background: #232323; width: 95%; margin: 0 auto; }
/* Responsive Container for iFrame */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<title>Tech Ops PH | your < IT / design < partner </title>
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
document.getElementById("myIframe").src=decodeURI(event.data)
console.log(decodeURI(event.data));
}
}
</script>
</head>
<body>
<div class='embed-container embed-responsive embed-responsive-4by3'>
<iframe id="myIframe" width="600" height="9000" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</body>
</html>
Why the document.getElementById("myIframe").src code doesn't work well with "https://datastudio.google.com/embed/reporting/1se-9ZRSukdgQUiRqYTSjT8nFLTV0v8Uq/page/y5MR" and work well with "https://www.icqmail.com/" how to fix it?
Via response headers web pages can tell the browser what other pages are allowed to iframe them.
Eg. datastudio.google.com sends the header:
x-frame-options: SAMEORIGIN
Meaning "The page can only be displayed in a frame on the same origin as the page itself."
Docs
But your other page does not so it can be embedded.
Related
I have deployed my website on netlify but, the website displays only HTML until it finishes loading... Any tips on a way to make the website only show once it has been fully loaded?
I have made my own loading animation but I don't know how to go on about doing this.
Use Window: load event.
The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.
Check the below example for reference.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#loader {
height: 100vh;
width: 100%;
background-color: black;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
}
#loader img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30%;
}
</style>
<title>The Loader</title>
</head>
<body>
<!-- Div for loader placement -->
<div id="loader">
<img src="loader.gif" />
</div>
<div>
<span>We'll answer you soon!</span>
</div>
</section>
<script>
//hide the loader after page is loaded fully
var loader = document.getElementById("loader");
window.addEventListener("load", function () {
loader.style.height = "100%";
loader.style.width = "100%";
loader.style.borderRadius = "50%";
loader.style.visibility = "hidden";
});
</script>
</body>
</html>
So I wrote this a few hours ago and then the servers went down
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Site</title>
<style>
.main {
visibility: hidden
}
</style>
<script>
window.addEventListener("load", function() {
document.getElementById("animation").style.display = "none";
document.getElementById("main").style.visibility = "visible";
})
</script>
</head>
<body>
<div id="animation">img src="animated.gif" /></div>
<div id="main">
Rest of the site
</div>
</body>
</html>
First I am going to show my code, this is my html code that's running:
<!DOCTYPE html>
<html>
<head>
<title>Elliots Site</title>
<base target="_top">
<?!= include('Gcss'); ?>
<script type="text/javascript">
</script>
</head>
<body>
<div class="page">
<iframe style="width: 100%; height: 100px; overflow: hidden;" src="http://google.com" width="100" height="100" scrolling="no">Iframes not supported</iframe>
<h1 class="emoj">"😀"</h1>
</div>
<?!= include('Gjavascript'); ?>
</body>
</html>
And this is my css file:
<style>
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.page iframe {
vertical-align:center;
width=200%;
height=100%;
}
.page .emoj {
text-align:center;
color:auto;
vertical-align:center;
}
.page{
background-color:white;
align-items: center;
height:400px;
background-attachment: fixed;
background-repeat: no-repeat;
text-align:center;
}
<style>
I also have two more files to run the code and apply the css file, which I am pretty sure is not the issue. This first one is a gs file which is a form of js the code starts at doGet
function doGet() {
return HtmlService.createTemplateFromFile('gindex')
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
and the other one which is html:
<!DOCTYPE html>
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>
Okay now the question. The current result is just a blank page, and its not even printing the text. so far i haven't tried anything that led to much success, so far i have worked on the css file to try to fix it. I have done research, but couldn't find much on google scripts. the goal of the code is to display google homepage inside of the site, I have been deploying it as a web page. This my first post If you have questions I could answer or test for please let me know
Your code looks a bit messy by how it's provided so for demo purposes I made my own. If you want to "embed" google.com first page to your site then use iframe but instead of using google.com try to use this link => https://www.google.com/webhp?igu=1 otherwise it will show nothing.
P.S. To preview code use full-page mode.
.frame {
height: 700px;
width: 600px;
}
.page {
text-align: center;
}
body {
background-color: grey;
height: 100vh;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IRONIXX</title>
</head>
<body>
<section class="page">
<h1 class="emoj">"😀"</h1>
<iframe class="frame" src="https://www.google.com/webhp?igu=1" frameborder="0"></iframe>
</section>
</body>
</html>
I know this doesn't solve your blank page scenario directly, but if you're interested in nesting another site within yours perhaps you'd be interested in using an iframe instead?
Here's a generator. Try punching in google.com and see if you can embed it in your site.
Theres full html code.
Hope somebody help me with it. Please.
Need to change background image to another one, but only when Curves script be doned.
Trying to find answer by google, but cant.
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<style>
body {
background: #141414 url(Wallpaper.jpg);
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<script src="Modernizr/modernizr-2.0.6.js"></script>
<script type="text/javascript">
Theres some script things
<title>HTML5 Canvas Generative Art</title>
<style type="text/css">
body {background-color:#141414; overflow: hidden;}
#caption {position:absolute; width:1360px; text-align:center; top:688px; z-index:1}
canvas {}
#displayCanvas {position:absolute; top:0px; left:0px; z-index:0;}
div {}
#container {width:1360px; height:688px; margin:auto;}
</style>
</head>
<body>
<div id="container">
<canvas id="displayCanvas" width="1360px" height="688">
Your browser does not support HTML5 canvas.
</canvas>
</div>
</body>
</html>
full html code in Drive Google:
link
Place your code at the bottom of your document. And any external js files you're loading, put them above the below script tag. That should work for you.
<script type="text/javascript">
// window.onload will ensure the document is fully loaded before running the below script
window.onload = (event) => {
// Your other scripts you'd like to execute before changing the background
// Code to change background
document.body.style.background = "url('new_image.gif')";
};
</script>
Update:
Your mark up is not properly created. Keeping the tags consistent and putting the relevant tags within head and body is a good practice. Refer to the code below.
// window.onload will ensure the document is fully loaded before running the below script
window.onload = (event) => {
// Your other scripts you'd like to execute before changing the background
// Code to change background
document.body.style.background = "url('https://i.imgur.com/cCqp22b.gif')";
};
body {
background: #141414 url(Wallpaper.jpg);
}
body {
background - color: #141414;
overflow: hidden;
}
# caption {
position: absolute;
width: 1360 px;
text - align: center;
top: 688 px;
z - index: 1
}
canvas {}
# displayCanvas {
position: absolute;
top: 0 px;
left: 0 px;
z - index: 0;
}
div {}
# container {
width: 1360 px;
height: 688 px;
margin: auto;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Canvas</title>
<script src="Modernizr/modernizr-2.0.6.js"></script>
</head>
<body>
<p>...</p>
<div id="container">
<canvas id="displayCanvas" width="1360px" height="688">Your browser does not support HTML5 canvas.
</canvas>
</div>
</body>
</html>
You can set the style.background property using JavaScript after the script is loaded.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("paper.gif");
background-color: #cccccc;
}
</style>
</head>
<body>
<!--Load some script here-->
<script>
setTimeout(()=>document.body.style.background = "url('https://i.pinimg.com/originals/f4/52/a2/f452a2f4b634b3011e065da8eaf0a5c3.gif')",1500);//simulate waiting
</script>
</body>
</html>
I have a full page website in iframe like
<head>
<title>Test Layout</title>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
</style>
</head>
<body>
<iframe width="100%" height="100%" src="websitehere" />
</body>
</html>
And there is a button in iframe that I want to change link.
I mean if you click that button you go to example.com and want to change it to example2.com .
I have not access to website thats in iframe to change codes there
There is an example here where he inserts an iframe where the height of the iframe is changed to be the height of the inserted content. He explains the trick here.
However when I try and do it with my Bootstrap example, then something is preventing the JavaScript from modifying the iframe. height is never added to the iframe.
Question
Can someone see why height isn't added to the iframe, as it is done in the original example?
I am using this as iframe content
wget http://www.456bereastreet.com/lab/iframe-height/iframe-content.html
and my html is
<!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">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
iframe {
width:100%;
margin:0 0 1em;
border:0;
}
#external-frame {min-height:800px;}
body {
padding-top: 70px;
}
.container .jumbotron {
background-color: #ffffff;
padding-right: 0px;
padding-left: 0px;
height: 100%;
margin:0 auto;
}
</style>
<script>
window.onload = function () {
setIframeHeight(document.getElementById('external-frame'));
};
</script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<iframe src="iframe-content.html" frameborder="0" id="external-frame"></iframe>
</div>
</div>
</body>
</html>
This feels too obvious, but it really looks like you just didn't define setIframeHeight or include any script that defines it.
If you want to call a function, obviously you need to have that function.
That's the function, copied from the page you linked to:
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
Paste it in your script tag and you should be good to go.