How to fill this iframe src with the value of this div? - javascript

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>

Related

How to get mouse position from a iframe that contains a page?

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 ?

How to print a html with entire iframe(s) content in it

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

How to add html contents into slideshow?

I want to design a page in which contents of page like header,navigation bar, buttons etc should be placed on slideshow. But the problem is when I add contents on div container or body, contents does not appear on slideshow. Can any one please tell me what should I do?Here is the code:
<html>
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //This is jquery code for fade slideshow
$('.pics').cycle('fade');
});
</script>
<style type="text/css">
.pics { //this is style of container (div) which contain images
height: 100%;
width: 100%;
position:absolute;
left:0;
top:0;
margin-right:0;
}
.pics img { //style of images
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="pics"> //html code for container
<img src="adv1_wheels_ferrari_f430-HD.jpg" width="100%" height="500" />
<img src="kepler_motion-HD.jpg" width="100%" height="100%" />
<img src="nissan_gt_r_gold-HD.jpg" width="100%" height="100%" />
</div>
</body>
</html>
The slideshow appears properly if you change the height property of pic img in css code.
Check this fiddle - click here
Hope it helped..!
EDIT - With visible heading
click here

refresh of page within the iframe for other page

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>

Can Javascript toggle frameborders?

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);

Categories