First, I apologize for my English evil. I am using a translator.
I put a ' refresh ' the page to redirect it after 45 seconds. As I do for this page to load only within the iframe? Thanks
<html>
<head>
<title>My title</title>
<meta http-equiv="refresh" content="45;URL=http://otherpage.com.br">
</head>
</head>
<body>
<div>
<iframe style="border: medium none ; overflow: hidden; width: 800px; height: 300px;" src="page2.html" frameborder="0" scrolling="no"></iframe>
</div>
</body>
</html>
Don't work.. :(
<html>
<head>
<title>My title</title>
<script>
setInterval(function(){
var url = 'http://stackoverflow.com/';
document.getElementsByTagName('iframe')[0].src = url; }, 45000);
</script>
</head>
</head>
<body>
<div>
<iframe style="border: medium none ; overflow: hidden; width: 800px; height: 300px;" src="page2.html" frameborder="0" scrolling="no"></iframe>
</div>
</body>
</html>
Here you are:
JQuery:
setInterval(function(){
var url = 'http://stackoverflow.com/';
$('iframe').prop('src', url);
}, 45000);
Or Javascript:
setInterval(function(){
var url = 'http://stackoverflow.com/';
document.getElementsByTagName('iframe')[0].src = url;
}, 45000);
You have a problem of "X-Frame-Options' to 'SAMEORIGIN".
Now, What does it(X-Frame-Options' to 'SAMEORIGIN) mean?
Ans: It means that the site owner do not want anybody to open his/her site in iframe because for security point of view it is poor to have a site to be opened in iframe.
You can check out the link : How Can I Bypass the X-Frame-Options: SAMEORIGIN HTTP Header?
Try this:
<html>
<head>
<title>My title</title>
<meta http-equiv="refresh" content="45;URL=http://otherpage.com.br">
</head>
<body>
<div>
<iframe style="border: medium none ; overflow: hidden; width: 800px; height: 300px;"
src="index.html"
frameborder="0"
scrolling="no"></iframe>
</div>
<script>
setInterval(function()
{
console.log("here");
var elem=document.getElementsByTagName('iframe')[0];
elem.src=elem.getAttribute("src");
}, 45000);
</script>
</body>
</html>
Related
I have this div tag on my page:
<div class="widget-content">https://www.somelink.com</div>
And also this iframe tag:
<iframe frameborder='0' height='100%' src='' width='100%'/>
Is it possible to fill iframe src with the "https://www.somelink.com" value from .widget-content?
This standalone web page, containing HTML, CSS and JS will do what you asked. In this case, we get Kodak's main page (only because they don't prevent framing their site--many others do).
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<style>
#myIframe {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="widget-content">https://www.kodak.com</div>
<iframe id="myIframe" frameborder='0' height='100%' src='' width='100%'/></iframe>
<script>
var doc = document
, myNewPage = doc.querySelector( 'div.widget-content' ).innerText
;
doc.getElementById( 'myIframe' ).src = myNewPage;
</script>
</body>
</html>
I have a finished JQuery for moving a 360° object (picture) with mouse actions.
The code is working:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery j360 Plugin Demo</title>
<script src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/j360.js" ></script>
</head>
<body>
<div class="jquery-script-clear"></div>
<h1 style="margin-top: 150px;">jQuery j360 Plugin Demo</h1>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#product').j360();
});
</script>
<center>
<div id="product" style="width: 1920px; height: 1080px; overflow: hidden;">
<img src="v/1.png" />
<img src="v/2.png" />
<img src="v/3.png" />
<img src="v/4.png" />
<img src="v/5.png" />
</div>
</center>
</body>
</html>
The needed pictures are received on demand from a server, so I have to create this code on demand after receiving the pictures. I use therefore document.write commands - I know they are not best practice, but usually it works ... Anyway this is the code I use - basically the same (even when I'm debugging I can't find a difference in the created HTML to the "original" HTML)
So basically it's like that:
<button id="click1" onclick="myFunction()">click me</button>
<script>
function myFunction() {
document.writeln('<html>');
document.writeln('<head>');
document.writeln('<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">');
document.writeln('<title>jQuery j360 Plugin Demo</title>');
document.write('<scr');
document.write('ipt src="js/jquery-1.4.4.min.js"></scr');
document.write('ipt>');
document.write('<scr');
document.write('ipt type="text/javascr');
document.write('ipt" src="js/j360.js" ></scr');
document.writeln('ipt>');
document.writeln('</head>');
document.writeln('<body>');
document.writeln('<div class="jquery-script-clear"></div>');
document.write('<scr');
document.writeln('ipt type="text/javascript">');
document.write(' jQuery(document).ready(func');
document.writeln('tion() {');
document.write(" jQuery('");
document.write('#');
document.writeln("product').j360();");
document.writeln(' });');
document.write('</scr');
document.writeln('ipt>');
document.writeln('<center>');
document.writeln('<div id="product" style="width: 960px; height: 540px; overflow: hidden;">');
document.write('<img src="images/01.jpg" />');
document.write('<img src="images/02.jpg" />');
document.write('<img src="images/03.jpg" />');
document.writeln('</div>');
document.writeln('</center>');
document.writeln('</body>');
document.writeln('</html>');
}
</script>
The created HTML shows the picture but the jQuery plugin is not working. The JS are the same.
Thank for your help!
document.write overwrites any code you have.
Example:
function overwrite() {
document.write("Oops, I've overwritten the code!");
}
<!doctype html>
<html>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<button onclick="overwrite()">Click me!</button>
</body>
</html>
I want to get mouse position from an IFRAME that contains a HTML page .
But before Iframe HTML page load , this code work nice .
After loading Iframe HTML page , this code don't work !
Here is my code :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8" />
<style>
#divid {
height: 600px;
width: 300px;
border: 2px solid black;
transform: scale(0.5, 0.5);
}
</style>
</head>
<body>
<iframe id="iframe" src="http://www.google.com/" >
</iframe>
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>
var iframepos = $("#iframe").position();
$('#iframe').contents().find('html').on('mousemove', function (e) {
var x = e.clientX + iframepos.left;
var y = e.clientY + iframepos.top;
console.log(x + " " + y);
})
</script>
</body>
</html>
can you help me please ?
I'm working on a printing function for a web mail client, currently as we need to show some additional mail infos, so display an email by embedding a iframe, iframe height is dynamic based on inner content height, when I click 'Print' menu of browser then the print preview dialog pops up, find that can not print entire iframe content. Anybody know why? Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
iframe{
width: 100%;
border: 1px solid #ECECEC;
}
</style>
<script>
function loaded(evt) {
const frame = evt.target;
frame.height = frame.contentWindow.document.body.scrollHeight;
};
function reloadFrame(frame) {
frame.height = 'auto';
loaded({target: frame});
}
window.onresize = function() {
reloadFrame(frame1);
reloadFrame(frame2);
}
</script>
</head>
<body>
<div class="container">
<h2>additional info</h2>
<iframe id="frame1" src="child.html" width="100%" onload="loaded(event);" scrolling="no" frameborder="0"></iframe>
<h2>additional info</h2>
<iframe id="frame2" src="child2.html" width="100%" onload="loaded(event);" scrolling="no" frameborder="0"></iframe>
</div>
</body>
</html>
Here are some screenshots:
Html Page
Print Preview
I'm trying to use JS to toggle a frame's frameborder attribute. Here is my test case:
<html>
<head>
<script type="text/javascript">
function off() {
var f1 = document.getElementById("f1");
var f2 = document.getElementById("f2");
alert ("before, frame f1 had frameBorder=" + f1.frameBorder);
f1.frameBorder = "0";
alert ("after, frame f1 has frameBorder=" + f1.frameBorder);
alert ("before, frame f2 had frameBorder=" + f2.frameBorder);
f2.frameBorder = "0";
alert ("after, frame f2 has frameBorder=" + f2.frameBorder);
}
</script>
</head>
<frameset cols="50%, 50%" name="fs">
<frame frameborder="1" src="http://bikeshed.com" id="f1" name="f1" />
<frame frameborder="1" src="http://bikeshed.com" id="f2" name="f2" />
</frameset>
</html>
I load this up in Firefox, open up Firebug, and type "off()" into the console. It runs my function, which reports that both frameborders had been set to "1" and are now set to "0" .. however, the frame border fails to disappear.
Is what I'm trying to do possible? If so, how?
Using iframes instead of frames seems to work. You'll have to work on the CSS a bit to complete the illusion of a frameset.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Frame Test</title>
<script language="javascript">
var off = function () {
document.getElementById('frame1').style.borderWidth = 0;
alert('off');
}
</script>
</head>
<body style="margin: 0; padding: 0">
<table style="width: 100%; height: 100%" cols="2">
<tr>
<td><iframe id="frame1" src="http://www.google.com" style="margin: 0; width: 100%; height: 100%"></iframe></td>
<td><iframe id="frame2" src="http://www.google.com" style="margin: 0; width: 100%; height: 100%"></iframe></td>
</tr>
</table>
</body>
</html>
For some attributes, you need to use setAttribute. Try
f1.setAttribute('frameborder', 0);