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
Related
I created an HTML page with two IFRAME windows.
I want to change the addresses between them when the "Enter" key is pressed.
Thanks!
<body style="background-color:black;">
<iframe class="g" src="www.example.com" scrolling="no" frameborder="0" height="100%" width="100%" allowfullscreen></iframe>
<div id="overlay"><iframe src="www.wow.com" scrolling="no" frameborder="0" marginheight="0px" height="205px" width="360px" allowfullscreen></iframe>
<style> #overlay {
position: absolute;
top: 430px;
right: 15px;
color: #FFF;
text-align: center;
font-size: 20px;
width: 400px;
padding: 10px 0;
z-index: 2147483647;
}
.g {
height: 100%;
}
#v {
z-index: 1;
}</style></div><div style='text-align: right;position: fixed;z-index:9999999;bottom: 0; width: 100%;cursor: pointer;line-height: 0;display:block !important;'></div></body>
Apply Javascript here.
Onsubmit/onclick enter key you have to set the src attribute of iframe tag.
In Materialize Carousel method instead of normal images, I have inserted Iframe to embed a web link in slides. On inserting Iframes, clicking to switch slide doesn't work.
Carousel Method:
<div class="carousel">
<a class="carousel-item"> <iframe style=' max-height: 700px; max-width: 420px; width: 340px; height: 566px;' src='http://www.website.com' frameborder='0' allowfullscreen scrolling='no'></iframe></a>
<a class="carousel-item"> <iframe style=' max-height: 700px; max-width: 420px; width: 340px; height: 566px;' src='http://www.website.com' frameborder='0' allowfullscreen scrolling='no'></iframe></a>
<a class="carousel-item"> <iframe style=' max-height: 700px; max-width: 420px; width: 340px; height: 566px;' src='http://www.website.com' frameborder='0' allowfullscreen scrolling='no'></iframe></a>
<a class="carousel-item"> <iframe style=' max-height: 700px; max-width: 420px; width: 340px; height: 566px;' src='http://www.website.com' frameborder='0' allowfullscreen scrolling='no'></iframe></a>
</div>
The non active slides are not clickable. On clicking, they don't get activated.
Kindly help me find a solution
In the iframe's style attribute, add:
pointer-events: none;
to disable click events on the iframe. This will make sure click events correctly bubble up to the Materialize Carousel plugin.
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
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 tried some usual document object commands like getElement by id/by tag/by name. They all give null, only bale to identify iframe id"my_dash" but can not access innerHTML. Either gives undefined or nothing in alert. I was trying to access the iframe "iframe_Content_portlet1" to change its src by making a javascript function to work on click link but was not working. Please suggest how to access it....
Given below is the code one finds in firebug.
*regarding context from my main code *
<tr>
<td colspan="10">
<!--this is the iframe accessible by main jsp-->**
<iframe id="my_dash" width="990px" height="935px" padding-left:="200px" src="http://172.31.144.171:8080/pentaho/content/dashboards?solution=airport&path=%2FMain&action_name=ATM-Dashboard.xdash">
<!--content inside the main iframe-->**
<html class=" ext-strict" xmlns:pho="http:/www.pentaho.com">
<head>
<body id="ext-gen6" class="pentaho-transparent ext-gecko ext-linux pentaho-page-background">
<div id="wrapper" class="wrapper">
<div id="dashboard-content">
<div id="titlebar" class="title" style="position: absolute; display: block; left: 0px; top: 0px; width: 990px; height: 23px;">
<h1 id="dashboard-title" class="pageTitle">New Dashboard</h1>
</div>
<div id="widget-area" class="widget-area" scrollexception="true" style="display: block; top: 29px; width: 990px; height: 906px; left: 0px; z-index: 30;">
<div id="widget-area-scroll-shim" style="width:100%;height:100%;"></div>
<div id="select-frame-left"></div>
<div id="select-frame-top"></div>
<div id="select-frame-bottom"></div>
<div id="select-frame-right"></div>
<div id="FilterPanel" class="povContainer" style="position: absolute; top: 0px; width: 100%; height: 100%; left: 0px; z-index: 30; display: none;" pho:panel="FilterPanel">
<div id="hbox1" style="position: absolute; top: 0px; width: 990px; height: 300px; left: 0px;">
<div id="Panel_1" class="widgetContainer" style="position: absolute; top: 5px; width: 567.044px; height: 290px; left: 5px; z-index: 30;" pho:panel="Panel_1">
<div class="widget">
<div id="wgtHead-Panel_1" class="wgtHead" ondblclick="pentahoDashboardController.panelTitleDoubleClick('Panel_1')" onclick="pentahoDashboardController.panelTitleClick('Panel_1', true);">
<div id="dataContainer-Panel_1" class="dataContainer" style="height: 265px;">
<div class="rightCorner">
<div class="wgtData">
<div id="content-area-Panel_1" class="panel-contentarea" onclick="pentahoDashboardController.panelTitleClick('Panel_1', false)" style="top: 23px; width: 567.044px; height: 265px; left: 0px;">
<!--this is the iframe I want to access in the same jsp(it is being accessed by another jsp, not included in the main jsp)-->**
<iframe frameborder="0" src="http://172.31.144.171:8080/pentaho/pentaho-solutions/airport/ATM/scorecard/common1.jsp?dashboard_id=1&portlet_id=1" border="0" style="width:100%;height:100%;border:0px">
<html>
<head>
<body>
<style type="text/css">
<div>
<!--this is the iframe I want to access in the same jsp(it is being accessed by another jsp, not included in the main jsp)-->
<iframe id="iframe_Content_Portlet1" width="100%" height="100%" style="overflow:hidden;"src="http://172.31.144.171:8080/pentaho/content/reporting/reportviewer/report.html?solution=airport&path=%2FATM%2Fscorecard&name=atm_scorecard.prpt&locale=en_US&username=joe&password=p##ssw0rd">
<html class="dj_gecko dj_contentbox" xmlns:pho="http:/www.pentaho.com">
<head>
<body class="tundra body pentaho-page-background">
</html>
</iframe>
</body>
</html>
</iframe>
</div>
</div>
</div>
</div>
<div id="wgtFooter-Panel_1" class="wgtFooter">
<div class="rightCorner"></div>
</div>
</div>
</div>
How are you trying to reach what's inside your frame?
Because something along the lines of frames["my_dash"].document.getElementById("XXXX") should work.
See https://developer.mozilla.org/en-US/docs/DOM/window.frames for a little doc on frames.