I have limited knowledge on IFrames. So far I know that the "src" of an IFrame should have an URL from where the content will be fetched. But lately, I am seeing many IFrames whose contents are as follows:
<iframe id="google_ads_iframe_/20346936/skysports/homepage_0" title="3rd party ad content" name="google_ads_iframe_/20346936/skysports/homepage_0" width="728" height="90" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" src="javascript:"<html><body style='background:transparent'></body></html>"" style="border: 0px; vertical-align: bottom; height: 90px;"></iframe>
Now if we look into the "src" attribute its
src="javascript:"<html><body style='background:transparent'></body></html>""
So what does this mean and how are much Iframes populated. Any knowledge or pointer would be much appreciated.
Thanks a lot.
It's injecting content to iframe.
There is good articles about that:
INJECTING HTML INTO AN IFRAME
Inject Content into a new IFrame
How to Inject Custom HTML and CSS into an iFrame (video)
Simple example:
HTML
<div class="main">
<iframe id="iframe1">
</iframe>
</div>
CSS
#iframe1 {
border: solid 1px;
border-radius: 8px;
width: 80%;
min-height: 80%;
max-height: 80%;
color: red;
padding-top: 1em;
margin: 0 auto;
}
JS
$('#iframe1').contents().find('html').html("<h1 style='text-align: center;'>This IS an iframe</h1>");
Result
Related
So I have a code below that I have sand boxed over and it will not allow user to see the web page I have encoded as its blocked from getting viewed is there any attributes other than "sandbox" that I can use to show a website from a different source into my website
<div style="border: 6px solid #117013; overflow: hidden; margin: 1px auto; max-width: 975px;">
<iframe sandbox="allow-scripts" scrolling="no" src="https://www.chelseafc.com/en/news" style="border: 0px none; margin-left: -18px; height: 1250px; margin-top: -559px; width: 680px;">
</iframe>
</div>
Create simple page that loading into div some content by innerHTML, but when i use this javascript:
document.getElementById("someDiv").innerHTML =
'<iframe id="test1" class="yt-embed " style="top: 50px; width: 98%; height: 80%; margin-left: 1%;" src="https://www.youtube.com/embed/R7Ui_FnOPh8?rel=0&enablejsapi=1" allowfullscreen="false" frameborder="0" /><br>TEST';
But everything after iframe is not added.
Does anyone know why this is so?
An iframe cannot be self-terminated as in: <iframe />. You must provide an explicit closing tag for the element:
<iframe id="test1" class="yt-embed " style="top: 50px; width: 98%; height: 80%; margin-left: 1%;" src="https://www.youtube.com/embed/R7Ui_FnOPh8?rel=0&enablejsapi=1" allowfullscreen="false" frameborder="0"></iframe><br>TEST
I've managed to do a Iframe that shows only certain part of the page with this code:
<div id="divContainer" style="display: block; margin-left: auto; margin-right: auto;">
<div id="frameContainer" style="overflow:hidden;">
<iframe src="http://www.cofm.es/informacion-corporativa/buscador-farmacias" scrolling="no" style="width: 1000px; height: 750px; margin-top: -330px; margin-left: -250px;" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><br />
</div>
Source: iframe to Only Show a Certain Part of the Page
Now what I'm trying to do is to make the Iframe show on the 100% width on the screen. I've been able to do this with images with this code:
<img style="width: 100%; display: block; margin-left: auto; margin-right: auto; " src="http://i.ytimg.com/vi/ROv863DuJu4/maxresdefault.jpg" />
I'm trying to make the iframe adapt to the screen size like the image does.
Iframe is an inline element - You need to set css " display:block " - then you can make it 100% and it will scale - Hope this helps.
here is an example - you would have to set the containing element to full width as well..
<iframe style='display:block;width:100%' src='http://someurl.com'></iframe>
https://jsfiddle.net/cqgfqgqk/
I have made 3 websites
http://ice-os.com
http://hannahmontana.sf.net
http://demilovato.sf.net
they use an iframe on the main page index.html and load all the pages in this iframe
what i want to do is if some goes to say http://en.ice-os.com/home.html instead of index.html I want to
reload this home.html in my index.html in the iframe
how can this be done?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body{padding:0;margin:0;}
.myFloatBar{
top:0;
left:0;
width:50px;
position:fixed;
}
<style>
<style type="text/css">
html {overflow: auto;}
html, body, div, iframe {margin: 0px; padding: 0px; height: 100%; border: none;}
iframe {display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden;}
</style></head><body style="background-color: rgb(35, 35, 35); color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div style="margin-left: 50px; font-family: monospace;"><iframe id="tree" name="tree" src="home.html" marginheight="0" marginwidth="0" frameborder="0" height="100%" scrolling="auto" width="100%"></iframe></div>
<div class="myFloatBar"><span style="font-family: monospace;"> </span><span style="color: rgb(233, 233, 233); font-family: monospace;">ć°·Bar</span><img src="http://ice-os.com/images/home.png" alt="Home" title="Home" onclick="document.getElementById('tree').src='home.html';document.title='Home'" style="width: 48px; height: 48px;"><img onclick="document.getElementById('tree').src='downloads.html';document.title='Downloads'" style="width: 48px; height: 48px;" alt="Downloads" title="Downloads" src="http://ice-os.com/images/downloads.png"><img onclick="document.getElementById('tree').src='links.html';document.title='Links'" style="width: 48px; height: 48px;" alt="Links" title="Links" src="http://ice-os.com/images/links.png"><img style="width: 48px; height: 48px;" onclick="document.getElementById('tree').src='projects.html';document.title='Projects'" alt="Projects" title="Projects" src="http://ice-os.com/images/projects.png"><img style="width: 48px; height: 48px;" alt="Revision Control" title="Revision Control" src="http://ice-os.com/images/revisioncontrol.png"><img style="width: 48px; height: 48px;" onclick="document.getElementById('tree').src='contact.html';document.title='Contact'" alt="Contact" title="Contact" src="http://ice-os.com/images/contact.png"><img onclick="document.getElementById('tree').src='about.html';document.title='About'" style="width: 48px; height: 48px;" alt="About" title="About" src="http://ice-os.com/images/about.png"></div>
</body></html>
Wow, it's been a while, but I've seen this done with Javascripts that force users into framesets. I remember it from back in the late 90s, but I think it's kind of fallen out of favor since users have generally hated frames. (Usually this was for navigation on sites that, for whatever reason at the time, either didn't support server-side includes or perhaps the developer didn't understand includes...)
You can probably Google "javascript open page in frameset" and find a sample.
I'm using JavaScript with HTML and I have a page that includes multiple iframes. I want to be able to blur some of these iframse (not hide then) so that users can see what is inside these frames but cannot click on them or type in them.
Is there a way to do this?
iframe.contents().find('body').blur()
Something like this may be what you want: http://jsfiddle.net/Paulpro/xcWcn/1/
HTML:
<div id="frame1-blocker" class="frame-blocker"></div>
<iframe id="frame1" src="http://google.com" style="width: 500px; height: 300px; padding: 0px; border: 0px;"/>
CSS:
.frame-blocker{
background-color: rgba(0,0,0,0.5);
position: absolute;
width: 500px;
height: 300px;
}
I would suggest positioning a transparent DIV over each "blurred" iFrame to prevent clock events propagating downward. iFrame tags themselves do not to my knowledge provide the functionality you want.
And for what it's worth, "blur" in Web parlance refers to moving the text cursor outside of a control!
Here is a demo of a way using an overlay within the iframe:
#hidden {
display: none;
}
iframe {
width: 200px;
height: 200px;
}
a {
color: #f00;
text-decoration: underline;
cursor: pointer;
}
<div>
<a class="activate" rel="1">Active Test 1</a><br/>
<a class="activate" rel="2">Active Test 2</a><br/>
<a class="activate" rel="3">Active Test 3</a>
</div>
<iframe id="test1"></iframe>
<iframe id="test2"></iframe>
<iframe id="test3"></iframe>
<div id="hidden">
<div id="overlay" style="display: none; position: absolute; left: 0; top: 0; z-index: 100; background-color: #000;"></div>
<div>
http://www.yahoo.com/
</div>
</div>
$('iframe').each(function(){
$(this).contents().find('body').append($('#hidden').html());
});
$('div a.activate').click(function(){
$('iframe[id^=test]').contents().find('#overlay')
.css('height','200px')
.css('width','200px')
.fadeTo('fast', 0.5);
$('iframe#test'+this.rel).contents().find('#overlay')
.css('height','0')
.css('width','0')
.fadeTo('fast', 1);
});
http://jsfiddle.net/ZTpXa/