when I view this codes , iframe popup automatically open.
but I want to open iframe when I click "click me" button.
could you please help me ? I hope that its very easy trick but I am an amateur for javascript.
<html>
<head>
<script language="javascript">
var iframe = '<html><head><style>body, html {width: 100%; height: 100%; margin: 0; padding: 0}</style></head><body><iframe src="http://www.euronews.com" style="height:calc(100% - 4px);width:calc(100% - 4px)"></iframe></html></body>';
var win = window.open("","","width=1024,height=768,toolbar=no,menubar=no,resizable=yes");
win.document.write(iframe);
</script>
<head>
<body>
<b><font color="000">Click Me !</font></b>
</body>
</html>
I have fixed your code for you. You should probably not use an inline call, but here is how you would do it. Make sure to wrap your code in the load function so when you call javascript:load() it will complete the function.
<html>
<head>
<script language="javascript">
function load() {
var iframe = '<html><head><style>body, html {width: 100%; height: 100%; margin: 0; padding: 0}</style></head><body><iframe src="http://www.euronews.com" style="height:calc(100% - 4px);width:calc(100% - 4px)"></iframe></html></body>';
var win = window.open("","","width=1024,height=768,toolbar=no,menubar=no,resizable=yes");
win.document.write(iframe);
}
</script>
</head>
<body>
<b><font color="000">Click Me !</font></b>
</body>
</html>
A solution could just be not creating the Iframe until the button is clicked:
<html>
<head>
<script language="javascript">
function load() {
var iframe = '<html><head><style>body, html {width: 100%; height: 100%; margin: 0; padding: 0}</style></head><body><iframe src="http://www.euronews.com" style="height:calc(100% - 4px);width:calc(100% - 4px)"></iframe></html></body>';
var win = window.open("","","width=1024,height=768,toolbar=no,menubar=no,resizable=yes");
win.document.write(iframe);
}
</script>
</head><body>
<b><font color="000">Click Me !</font></b></body>
</html>
Related
I have a few URLs that each show the status of some industrial equipment. I'm trying to create an HTML/Javascript solution that, on load, cycles through each of the websites at a set interval, with two buttons to stop the cycle (to take a closer look at something) and restart the cycle (either from the beginning or where it left off, I'm not picky). I'm REALLY rusty, but I got what I think is a good start. Unfortunately, it doesn't work. Here are the CSS and HTML:
html,
body {
height: 100vh;
width: 100vw;
}
#btStart {
position: absolute;
width: 50px;
height: 40px;
left: 20px;
top: 50px;
}
#btStop {
position: absolute;
width: 50px;
height: 40px;
left: 20px;
top: 120px;
}
#infoFrame {
width: 100%;
height: 100%;
}
.holder {
width: 100%;
height: 100%;
position: relative;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Info Cycle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="holder">
<iframe src="" id="infoFrame" frameborder="0" allowfullscreen>
<script type="text/javascript">
var urlArray = ['url1.com',
'url2.com',
'url3.com',
'url4.com',
'url5.com'];
var count = 0;
var i = document.getElementById('infoFrame');
var u = document.getElementById('url');
var timer = setInterval(cycleTimer, 5000);
function nextUrl() {
url = urlArray[++count];
count = (count >= urlArray.length - 1)? -1 : count;
return url;
}
function cycleTimer() {
u.innerHTML = '';
i.src = nextUrl();
i.onload = function(){
u.innerHTML = i.src;
}
}
</script>
</iframe>
<button type="button" id="btStart" onclick="var timer = setInterval(cycleTimer, 5000);">Start</button>
<button type="button" id="btStop" onclick="clearInterval(timer)";>Stop</button>
</div>
</body>
<footer>
</footer>
</html>
Before I added the buttons it would load, then 5 seconds later it would cycle correctly, and so on. Now it only shows the buttons. Looking at the requests, I believe what's happening in my CSS and structure is trash, and it's loading the appropriate URL, but not displaying. I should add, prior to the buttons I only had the iframe with the script in it as a proof of concept. I div'd it, added the stylesheet, and added the buttons, and now here we are.
This may be a rookie mistake, or something more complicated. I haven't done development in a long time, and I'm just trying to solve a little problem at work. If you could spare a minute, I'd be happy to know how to fix this, and also any feedback on what I could be doing better. I'd love to get back into doing more of this, so I'm interested to learn anything the community can share. I've searched the site and the internet, and I've found a couple of related solutions but nothing for this in particular.
Thanks!
EDIT:
In case it helps, below is the HTML before the buttons and stylesheet, which worked (it rotated between webpages every 7 seconds):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Info Cycle</title>
</head>
<body>
<iframe id="frame" src=""
style="
position: fixed;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
height: 100%;
"></iframe>
<script type="text/javascript">
var urlArray = ['url1.com',
'url2.com',
'url3.com',
'url4.com',
'url5.com'];
var count = 0;
var i = document.getElementById('frame');
var u = document.getElementById('url');
var timer = setInterval(cycleTimer, 7000);
function nextUrl() {
url = urlArray[++count];
count = (count >= urlArray.length - 1)? -1 : count;
return url;
}
function cycleTimer() {
u.innerHTML = '';
i.src = nextUrl();
i.onload = function(){
u.innerHTML = i.src;
}
}
</script>
</body>
</html>
The iframe style was something I found in an old file I'd written (probably copied and pasted from Stack Overflow to just get a thing to work).
The problem here is having the script inside the iframe. If you move your script out of the iframe and put it under body or head then it will work.
<!DOCTYPE HTML>
<html>
<head>
<title>Info Cycle</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="main.css" rel="stylesheet">
<script type="text/javascript">
var urlArray = ['url1.com',
'url2.com',
'url3.com',
'url4.com',
'url5.com'];
var count = 0;
var timer = setInterval(cycleTimer, 5000);
function nextUrl() {
url = urlArray[++count];
count = (count >= urlArray.length - 1) ? -1 : count;
return url;
}
function cycleTimer() {
var i = document.getElementById('infoFrame');
var u = document.getElementById('url');
u.innerHTML = '';
i.src = nextUrl();
i.onload = function () {
u.innerHTML = i.src;
}
}
</script>
</head>
<body>
<div class="holder">
<iframe src="" id="infoFrame" frameborder="0" allowfullscreen>
</iframe>
<button type="button" id="btStart" onclick="var timer = setInterval(cycleTimer, 5000);">Start</button>
<button type="button" id="btStop" onclick="clearInterval(timer)" ;>Stop</button>
</div>
</body>
<footer>
</footer>
</html>
In my html I have a div id="mainWrapper" that I want to insert html markup that I created in an external js file. How can I do this without eliminating any existing divs inside "MainWrapper"? I want the external markup to be a child of "mainWrapper". Below is my external JS file and the HTML file.
//External mainScript.js file//
var pageContent = {
skinImg: "images/staticTO_SKIN_000000.jpg",
leaderBoardImg: "images/staticTO_LEADERBOARD.jpg"
}
function renderLB(){
var markup ='\
<div id="leaderBoard"><img src='+pageContent.leaderBoardImg+'> </div>\
<style>\
#leaderBoard{width:1200px; height:82px; position:relative;top:0px}\
#pageContent{top: 65px;}\
</style>'
renderMarkup(markup);
}
renderLB();
function renderMarkup(markup){
}
<html>
<head>
<title> </title>
<style>
body{
padding: 0px;
margin: 0px;
}
#mainWrapper{
width: 1200px;
margin: 0 auto;
height: auto;
}
#pageContent{
position: relative;
width: 1200px;
height: 953px;
}
</style>
</head>
<body id="body">
<div id="mainWrapper">
<div id="pageContent"><img src="images/pageSkin.jpg"> </div>
<div>
<script src="mainScript.js"> </script>
</body>
</html>
I'm not sure I understood what you want. But if that is to append html within a node without loosing childs, you could do it like so:
function renderMarkup(markup) {
var main_wrapper = document.getElementById('mainWrapper');
main_wrapper.innerHTML += markup;
}
Jquery gives you that function build in:
$('#mainWrapper').append(markup);
here is the documentation
I want to change the background color if width is bigger than 100.
This is my code but it doesn't work.
Thanks for any help!
<html>
<head>
<style type="text/css">
div#mydiv {
width: 200px;
height: 100px;
background-color: red;
}
</style>
<script language="JavaScript">
function () {
var mydiv = document.getElementById("mydiv");
var curr_width = parseInt(mydiv.style.width);
if (curr_width > 100) {
mydiv.style.BackgroundColor = "blue";
}
}
</script>
</head>
<body>
<div id="mydiv" style=""></div>
</body>
</html>
Change
parseInt(mydiv.style.width);
mydiv.style.BackgroundColor = "blue";
To
mydiv.offsetWidth
mydiv.style.backgroundColor = "blue";
use
var curr_width = mydiv.offsetWidth;
instead
var curr_width = parseInt(mydiv.style.width);
Change:
var curr_width = parseInt(mydiv.style.width);
mydiv.style.BackgroundColor = "blue";
to:
var curr_width = mydiv.offsetWidth;
mydiv.style.backgroundColor = "blue";
I have set up a fiddle here.
Also notice I took it out of the function because it looked like it wasn't being called anywhere. You should also move the script out of the head to the bottom of the body tag or use window.onload.
UPDATE
Another fiddle with everything together
I assume this is a duplicate question.
Anyway, your intialization of curr_width need not include parseInt.
parseInt is for converting a value to integer type and here you doesnt require it.
Your code can be re-written as
<html>
<head>
<style type="text/css">
div#mydiv {
width: 200px;
height: 100px;
background-color: red;
}
</style>
<script language="JavaScript">
function () {
var mydiv = document.getElementById("mydiv");
var curr_width = mydiv.offsetWidth;
if (curr_width > 100) {
mydiv.style.BackgroundColor = "blue";
}
}
</script>
</head>
<body>
<div id="mydiv" style=""></div>
</body>
</html>
Assuming your function to be called onload. Here's the code:
<html>
<head>
<style type="text/css">
#mydiv {
width: 200px;
height: 100px;
background-color: red;
}
</style>
<script language="JavaScript">
function load(){
var mydiv = parseInt(document.getElementById("mydiv").offsetWidth);
if (mydiv > 100) {
document.getElementById("mydiv").style.backgroundColor = "blue";
}
}
</script>
</head>
<body onload="load();">
<div id="mydiv" style=""></div>
</body>
</html>
Changes:
Use offsetWidth to get the width of the div.
Use backgroundColor instead of BackgroundColor.
To get a proper computed width, you need to use the (not enough used) method getBoundingClientRect() https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect
Latest browsers have .width property, otherwise you just need to take right - left to get it.
Some comments:
- language="JavaScript" is useless. Like type="text/javascript". It's the default behavior. Seriously.
- you need to execute your code after the div has been created. So using onload or just by calling the code after in the html (like in my example)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mydiv {
width: 200px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="mydiv"></div>
<script>
/* run the code after the creation of #mydiv */
var mydiv = document.getElementById("mydiv");
var clientRect = mydiv.getBoundingClientRect()
var curr_width = clientRect.width || (clientRect.right - clientRect.left);
if (curr_width > 100) {
mydiv.style.backgroundColor = "blue";
}
</script>
</body>
</html>
Here is a working example http://jsbin.com/xapet/1/edit
Warning: to do this properly it's recommended that you execute this code each time the browser is resized.
Maybe you can take a look to the "element queries" thing, that will be a nice workaround according to media queries limitations.
https://encrypted.google.com/search?hl=en&q=element%20queries%20css
I want to create a website where I can write and preview a website. The problem is that I want to preview it in an iframe, because then the website isn't influenced by the HTML code around the iframe.
Is there a way to show a webpage in an iframe tag with a string as source instead of an URL?
This is how it should look (just an iframe).
<textarea onkeyup="document.getElementById("body").innerHTML=this.value;"></textarea>
<div id="body"></div>
In fact, JSFiddle does the same, so there must be a way. Ideas?
You can modify the content of the document specified by the src attribute, using contentWindow.document. So, assuming you had a <textarea> with the markup you want to preview, you could do something like this:
Editor document:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Edit iframe example</title>
<style>
.editors, .preview { float: left; display: block; }
.editors { width: 500px; margin-right: 25px; }
.editors textarea { width: 100%; height: 300px; }
.preview { width: 800px; }
.preview iframe { width: 100%; height: 800px; }
</style>
</head>
<body>
<div class="editors">
<p>
<label>CSS</label>
</p>
<p>
<textarea id="preview-editor-CSS" onkeyup="updatePreviewCSS(this)"></textarea>
</p>
<p>
<label>HTML</label>
</p>
<p>
<textarea id="preview-editor-HTML" onkeyup="updatePreviewHTML(this)"></textarea>
</p>
</div>
<div class="preview">
<iframe id="preview" src="preview.html"></iframe>
</div>
<script>
function updatePreviewHTML(elem) {
var frame = document.getElementById('preview');
var content = elem.value;
frame.contentWindow.document.body.innerHTML = content;
}
function updatePreviewCSS(elem) {
var frame = document.getElementById('preview');
var content = elem.value;
frame.contentWindow.document.getElementsByTagName('style')[0].innerHTML = content;
}
</script>
</body>
</html>
The "preview" document:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Preview iframe example</title>
<style></style>
</head>
<body>
</body>
</html>
I've only tried this locally, on Firefox 31, so caveat emptor.
I have followed the instructions here and here but am not able to implement easyXDM correctly to auto-size the height of my iframe.
On the page with the iframe (host.html), I can see the contents I am importing (otherdomain.html) but the height of the iframe is much shorter than the contents, and the height does not change. Unfortunataely this is on a development site I can not link to here.
otherdomain.html has elements that expand on click so I need the iframe to expand and contract as the contents of the page do so.
Can anyone tell me what I am doing wrong please? These are two different domains/servers I am working with. This is the first time I have set up a socket or done anything like this - I don't see any errors in the console but I can't make much sense out of the what it is telling me.
Here is a similar question, but was not answered: IFrame resizing with easyXDM
Here is what I have on the page that has the iFrame:
<style type="text/css">
div#embedded iframe {
width: 725px;
}
</style>
<script src="../js/easyXDM.debug.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
new easyXDM.Socket({
remote: "http://lcoawebservices.com/careers/resize_intermediate.html?url=job-postings.php",
container: "embedded",
onMessage: function (message, origin) {
var settings = message.split(",");
this.container.getElementsByTagName("iframe")[0].style.height = settings[0];
this.container.getElementsByTagName("iframe")[0].style.width = settings[1];
}
});
</script>
<div id="embedded"></div>
Here is what I have on resize_intermediate.html:
<script type="text/javascript" src="../scripts/easyXDM.debug.js">
</script>
<script type="text/javascript">
var iframe;
var socket = new easyXDM.Socket({
swf: "../scripts/easyxdm.swf",
onReady: function(){
iframe = document.createElement("iframe");
iframe.frameBorder = 0;
document.body.appendChild(iframe);
iframe.src = easyXDM.query.url;
},
onMessage: function(url, origin){
iframe.src = url;
}
});
//Probe child.frame for dimensions.
function messageBack(){
socket.postMessage ( iframe.contentDocument.body.clientHeight + "," + iframe.contentDocument.body.clientWidth);
};
//Poll for changes on children every 500ms.
setInterval("messageBack()",500);
</script>
<style type="text/css">
html, body {
overflow: hidden;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
iframe {
width: 100%;
height: 100%;
border: 0px;
}
</style>
and at the bottom of the page I am importing I have placed this:
<script type="text/javascript">
window.onload = function(){
parent.socket.postMessage(document.body.clientHeight || document.body.offsetHeight || document.body.scrollHeight);
};
</script>