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);
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>
How can the outermost body tag be styled using JavaScript from inside the innermost body tag of an iFrame?
<html>
<head>
</head>
<body>
<div id="ad_tag" style="width: 1px; height: 1px;">
<div id="ad_container" style="border: 0pt none;">
<iframe id="ad_iframe" title="title" name="name" scrolling="no" marginwidth="0" marginheight="0" style="border: 0px none; vertical-align: bottom;" srcdoc="" width="1" height="1" frameborder="0">
<html>
<head>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<script>
parent.document.body.style.background = "url('https://news.nationalgeographic.com/content/dam/news/photos/000/676/67655.jpg') no-repeat top center fixed #ffffff";
</script>
</body>
</html>
</iframe>
</div>
</div>
<div id="content">
</div>
</body>
</html>
In this specific case:
No direct editing of attributes or styling allowed, existing are preset.
Only child elements of the innermost body can be edited.
The goal is to deliver a background image using Google DFP.
The best way would be with a post message from the frame, that the parent (the site) will execute through listener.
So your iframe should contain some code like:
<script>
window.parent.postMessage({
'func': 'changeBackground',
'message': ''
}, "*");
</script>
And your parent (the site) should contain a listener like:
<script type="text/javascript">
if (window.addEventListener) {
window.addEventListener("message", onMessage, false);
}
else if (window.attachEvent) {
window.attachEvent("onmessage", onMessage, false);
}
function onMessage(event) {
var data = event.data;
if (typeof(window[data.func]) == "function") {
window[data.func].call(null, data.message);
}
}
function changeBackground(message) {
$('div#backgroundwrapper').css({
'background-image': 'url("https:/example.com/example.jpg")',
$('div#backgroundwrapper').click();
var win = window.open( '%%CLICK_URL_ESC%%%%DEST_URL%%', '_blank');
win.focus();
});
}
</script>
In my example, it will put the image file as a background on a div with ID backgroundwrapper. My example uses jQuery to change the CSS and adding a clicktag, but it could be made without it as well.
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
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>
Please go thorough below HTML files code. Here I am trying to use toggle function of jQuery. Here my toggle for "content.HTML" page is working perfectly. I need to hide the "topFrame" Completely when I click on any image or button and unhide it when I click on it again.
Please help me where I've made mistake. I've tried a lot to accomplish this but I am not able to do.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frameset Example Title (Replace this section with your own title)</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<frameset rows="10%,90%" border="0" name="FrameName">
<frame name="topFrame" src="menu_1.html" target="right"></frame>
<frame name="menu" src="content.html" target="_self"></frame>
<noframes>
//....
</noframes>
</frameset>
<script>
$(document).ready(function(){
$("button").click(function(){
$('frame[name="topFrame"]').fadeToggle("slow");
$("#top").toggle();
});
});
</script>
</html>
content.html
<html>
<head>
<title>HTML Frames Example - Content</title>
<style type="text/css">
body {
font-family:verdana,arial,sans-serif;
font-size:10pt;
margin:30px;
background-color:#ffcc00;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<h1>Content</h1>
<br>
<button id="button1">Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
<script>
$('button').on('click',function(){
$( "p" ).toggle( "slow" );
$( "h1" ).toggle( "slow" );
});
</script>
</body>
</html>
menu_1.html
<html>
<head>
<title>HTML Frames Example - Menu 1</title>
<style type="text/css">
body {
font-family:verdana,arial,sans-serif;
font-size:10pt;
margin:10px;
background-color:#ff9900;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
(function(){
$('img, button').on("click" , function (e) {
$('p').toggle();
});
});
</script>
</head>
<body>
<h3>Menu 1</h3>
<p>White Page</p>
</body>
</html>
Here you have toggle button in content frame and want to hide menu frame onclick of toggle button.
Problem is you cannot access javascript function present in parent from child frame, hence need to do some work-around like below :
Add a event listener in parent and call toggle frame function (frame cannot be hide or show directly using display property of css, hence added two seperate function) :
........
<frameset rows="10%,90%" border="0" name="FrameName">
<frame name="topFrame" src="menu_1.html" target="right"></frame>
<frame name="menu" src="content.html" target="_self"></frame>
<noframes>
//....
</noframes>
</frameset>
<script>
var origCols = null;
function receiveMessage(event)
{
if(origCols!=null)
showFrame()
else
hideFrame();
}
addEventListener("message", receiveMessage, false);
function hideFrame() {
var frameset = document.getElementById("frameSet");
origCols = frameset.rows;
frameset.rows = "0, *";
}
function showFrame() {
document.getElementById("frameSet").rows = origCols;
origCols = null;
}
</script>
</html>
And now write onclick of button like below :
<button id="button1" onclick="parent.postMessage('button1 clicked', '*');">
Toggle 'em</button>
Try using IDs
Here's a short example..
<div><a id="thumbnail">Click here to Show/Hide Thumbnail</a></div>
<div id="showhide"> Your Content to hide or show </div>
<script type="text/javascript">
$('#thumbnail').click(function() {
$('#showhide').toggle();
});
</script>