It's Possible to get : "MyTextTarget" in div in: domain2/file.html from this iframe using javascript postMessage ?
<div class="c1">
<iframe name="name1" id="name1" src="http://domain/file.html" frameborder="0" marginwidth="0" marginheight="0" allowtransparency="true" scrolling="no" width="100%"></iframe>
</div>
in domain/file.html :
<div class="c2_ " >
MyTextTarget
</div>
Related
I am embedding a link into an iframe:
<div class="container hidden" id="timeline" style="position: relative;">
<div class="embed-responsive embed-responsive-16by9">
<iframe allowfullscreen="true" class="embed-responsive-item container well well-small span6" frameborder="0" id="timeline_view" mozallowfullscreen="true" msallowfullscreen="true" oallowfullscreen="true" src="" webkitallowfullscreen="true">
</iframe>
</div>
</div>
It's not occupying the entire window. But it occupies a small rectangle. I played around with other options:
https://v4-alpha.getbootstrap.com/utilities/responsive-helpers/
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
This worked for me:
<!-- Timeline Viewer -->
<div class="container hidden" id="timeline">
<iframe style="position:absolute;top:0;left:0;width:100%;height:100%" allowfullscreen="true" frameborder="0" id="timeline_view" mozallowfullscreen="true" msallowfullscreen="true" oallowfullscreen="true" src="" webkitallowfullscreen="true">
</iframe>
</div>
I have more iframe in my page to load the video.
Now I want to prevent the iframe auto load when I opening the page.
What is happening now is all iframe will load when I opening the page.
<div id="youtube-customers-add" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/ivlfaPPP8TY" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-customers-edit" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/8LupmPYSYIo" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-dashboard" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/viCPPRHohSs" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-finance" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/MYneEOIJYp0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-finance-add" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/CEeuWTqjhQY" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-finance-edit" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/p-NSAonIhgA" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-payments" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/pURkv_rng-Y" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-partslabor" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5Ik7WVRxs7c" frameborder="0" allowfullscreen></iframe>
</div>
So, how can I prevent that?
Thanks
Here you are:
for (var i = 0; i < window.frames.length; i++) {
if (navigator.appName == 'Microsoft Internet Explorer') {
window.frames[i].document.execCommand('Stop');
} else {
window.frames[i].stop();
}
}
Hope this help.
You can rename src attribute
src-a="https://www.youtube.com/embed/p-NSAonIhgA"
I think you want to load iframe on some event, so you should use JavaScript, i think you need jQuery when element becomes visible
I'm trying to make a video gallery with fancybox using some of the tutorials I found for image galleries, but I'm not sure if this is what I'm looking for. All I have is an icon that displays a fancybox with all my iframes I and want to transform the video container into a video gallery.
This is my HTML:
<a id="videoIcon" href="#video" class="fancybox">
<img src="http://megaicons.net/static/img/icons_sizes/8/178/512/photo-video-start-icon.png" width="33" height="33">
</a>
<div id="video" style="display: none;" data-fancybox-group="gallery">
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2plsuh" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pn6zo" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pn66h" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pjpvg" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pn6wd" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pn61r" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2p5add" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2or2yc" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2of336" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
</div>
And this is my JS:
$(document).ready(function() {
$("a#videoIcon").fancybox();
$(".fancybox_iframe").fancybox({
type : 'iframe'
});
});
Here's a DEMO
Thank you and sorry for my bad English
P.S: The iframes are obtained using an ajax call and placing the response in a template with Handlebars.js, so the div that contains all the videos is actually empty at the beginning. Nevertheless, I don't think this is relevant for the solution.
![enter image description here][1]I have a dropdown element which is not identified by selenium webdriver and the following is the code for it. I need to click on id=lnkMenu1 which then opens the drop down and then click on id="lnkMenu2_ul". But selenium is not identifying. I tried Actions commands and Css selector, xpath none of them works.
<div class="nestedMenuDiv">
<a id="lnkMenu1" class="" onclick="javascript:parentClick('lnkMenu1'); return false;" href="#">Wireless & Alerts</a>
</div>
<ul id="entMenu1_2" style="left: 107px; top: 21px; display: none;">
<div class="nestedMenuDiv">
Dropdown to click
<a id="entMenu1_2" target="bodyFrame" href="#" onclick="navClick('Alerts.Retail.AdHoc','entMenu1_2',1, ''); return false">FidConnect</a>
</li>
I am getting no such element found error
The following is the complete HTML code. Please suggest me how do I go about it
<html>
<head>
<frameset border="0" frameborder="no" rows="100%, *">
<frame marginwidth="0" marginheight="0" frameborder="NO" src="main.do?browserOK=Y" name="mainframe">
<html>
<head>
<frameset border="0" frameborder="no" rows="100%, *">
<frame marginwidth="0" marginheight="0" frameborder="NO" src="main.do?browserOK=Y" name="mainframe">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Alpha - ECA Web Portal</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="../theme/styles/nav_ecapt.css" type="text/css" rel="stylesheet">
<script src="../theme/scripts/common.js" type="text/javascript">
<script src="../theme/scripts/main.js" type="text/javascript">
<script src="../theme/scripts/menuNav.js" type="text/javascript">
<script type="text/javascript">
</head>
<body id="mainbody" onresize="mainResize()" onunload="mainUnload()" onload="load()" scroll="no">
<div id="topnav" class="wrap" style="position:absolute;top:0;left:0">
<div id="header">
<a href="../index.jsp">
</div>
<div id="nav">
<div class="nestedMenuDiv">
<ul id="lnkMenu0_ul">
<div class="nestedMenuDiv">
<a id="lnkMenu1" onclick="javascript:parentClick('lnkMenu1'); return false;" href="#">Wireless & Alerts</a>
</div>
<ul id="lnkMenu1_ul">
<div class="nestedMenuDiv">
<ul id="lnkMenu2_ul">
<div class="nestedMenuDiv">
<ul id="lnkMenu3_ul">
<ul id="lnkMenu0_4_ul" class="nestedlist">
<ul id="lnkMenu0_5_ul" class="nestedlist">
<ul id="lnkMenu0_12_ul" class="nestedlist">
<ul id="lnkMenu0_28_ul" class="nestedlist">
<ul id="lnkMenu2_6_ul" class="nestedlist">
</div>
<div id="toplinks2">
<div id="toplinks">
</div>
<iframe id="bodyFrame" class="mainIFrame" frameborder="0" marginwidth="0" marginheight="0" src="body.do?ent=ECA.Intro" scrolling="no" name="bodyFrame" style="height: 279px; width: 1366px; top: 77px; display: block;">
<iframe id="menuFrame1" class="menuCover" frameborder="0" marginwidth="0" marginheight="0" src="javascript:'<body>'" scrolling="no" name="menuFrame1" style="width:100%; height:0px">
<iframe id="menuFrame2" class="menuCover" frameborder="0" marginwidth="0" marginheight="0" src="javascript:'<body>'" scrolling="no" name="menuFrame2" style="width:100%; height:0px">
<script language="JavaScript">
</body>
</html>
</frame>
</frameset>
</html>
</frame>
</frameset>
</html>
lnkMenu2_ul is a UL object, selenium can not click on such elements, only on clickable elements.
You can add an LI under the UL and click on it
Hi all I am trying to get an iframe of 500x200 to be on the right side of the tabs.
If the amount of tabs is more than the 200 height then id like to be able to have them be scrollable. Could someone point me in the right direction?
I'l eventually put the iframe in a panel and have the panel the size of col-lg-9 to fill the rest of the space.
<div class="container">
<div class="row">
<div class="col-lg-3">
<ul class="nav nav-pills nav-stacked" id="myTabs">
<li class="active">Home</li>
<li>DPA</li>
<li>Antwon</li>
<li>SSS</li>
<li>Ad</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<p>test</p>
</div>
<div class="tab-pane" id="dpa" data-src="http://www.google.ie">
<iframe src="" width="500" height="200"></iframe>
</div>
<div class="tab-pane" id="rn" data-src="http://player.vimeo.com/video/37138051?badge=0">
<iframe src="" width="500" height="200" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p>ANTWON ♦ HELICOPTER from Brandon Tauszik on Vimeo.</p>
</div>
<div class="tab-pane" id="sss" data-src="http://www.reddit.com/">
<iframe src="" width="500" height="200"></iframe>
</div>
<div class="tab-pane" id="ad" data-src="http://player.vimeo.com/video/37138051?badge=0">
<iframe src="" width="500" height="200" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p>ANTWON ♦ HELICOPTER from Brandon Tauszik on Vimeo.</p>
</div>
</div>
</div>
</div>
</div>
<script>
$('#myTabs').bind('show', function(e) {
paneID = $(e.target).attr('href');
src = $(paneID).attr('data-src');
// if the iframe hasn't already been loaded once
if($(paneID+" iframe").attr("src")=="")
{
$(paneID+" iframe").attr("src",src);
}
});
</script>
So, something like this?
#myTabs {float:left; height:200px; overflow:auto; }