I have .js inside an iframe. Can't find element - javascript

I am doing scraping with python and selenium.
Trying to access a table inside an iframe.
Page source section as below:
<div id="pageContentDiv">
<iframe frameborder="0" id="content" name="content" src="emxBlank.jsp" width="100%" height="100%"></iframe>
<iframe class="hidden-frame" id="hiddenFrame" name="hiddenFrame" src="emxBlank.jsp"></iframe>
<iframe class="hidden-frame" id="integrationsFrame" name="integrationsFrame" src="../integrations/emxIntegrations.jsp"></iframe>
<iframe class="hidden-frame" id="appletFrame" name="appletFrame" src="emxBlank.jsp"></iframe>
<iframe class="hidden-frame" id="ClipboardCollection" name="ClipboardCollection" src="emxClipboardCollection.jsp"></iframe>
</div>
While using firefox inspector, it should be
<div id="pageContentDiv" style="top: 0px;">
<div id="divPageHead" class="page-head">
<form method="post">
<div class="toolbar-subcontainer">
<table>
<tbody><tr>
<td class="page-title">
<h2>Part XXX XXXXXXXXX AA: BOM XXXXXXX</h2>
</td>
<td class="functions">
<table>
<tbody><tr>
<td class="progress-indicator"><div id="imgProgressDiv" style="visibility: hidden;"></div></td>
</tr></tbody></table>
</td>
</tr>
</tbody></table>
</div>
<script type="text/javascript">
function getTopAccessFrame() {
var oTop = this;
while(oTop && oTop.parent != oTop && oTop.name != "mxPortletContent" ){
try{
var doc = oTop.parent.test = "temp";
}catch(e){
break;
}
oTop = oTop.parent;}
try{
while(oTop.name != "mxPortletContent" && oTop.opener && oTop.opener.top){
var docOpenerTop = oTop.opener.top.test = "temp";
oTop = oTop.opener.top
}}catch(e){}
return oTop;}
</script>
<script type="text/javascript">
var topAccessFrame = getTopAccessFrame();
if(typeof topAccessFrame.emxUIConstants != "object"){
document.write("<scri" + "pt language=\"JavaScript\" type=\"text/javascript\" src=\"../common/emxUIConstantsJavaScriptInclude.jsp\"></scr" + "ipt>");
}else{
var emxUIConstants = topAccessFrame.emxUIConstants;
}
</script>
<script language="javascript" src="scripts/emxUICalendar.js"</script>
<script language="JavaScript" src="...></script>
<div class="toolbar-container" id="divToolbarContainer">
<div id="divToolbar" class="toolbar-frame"><div class="toolbar">
</div></div>
</div>
</form>
</div><!-- /#pageHeadDiv -->
<div id="divPageBody" style="top: 55px;">
<iframe name="portalDisplay" src="emxPortalDisplay.jsp?portal=ENCPartEBOMPortal&header=emxEngineeringCentral.ObjectPortal.PartEBOMHeader&HelpMarker=emxhelppartebompv&objectId=51758.28388.51328.17028&suiteKey=EngineeringCentral&StringResourceFileId=emxEngineeringCentralStringResource&SuiteDirectory=engineeringcentral&treeLabel=XXXX" border="0" width="100%" height="100%" frameborder="0"></iframe>
</div>
<div></div></div>
Detail about my question:
I don't know which iframe should I switch to.
Once switch into the iframe, I'm still getting .js code only but not any elements.
I'm using Firefox. Is it causing the issue?
I have already tried iframe switch as
iframe=driver.find_element_by_name("ClipboardCollection")
driver.switch_to.frame(iframe)
Not solving my problem.

Related

How to show specific nodes from xml?

I created a code to display data from XML. I need to filter some data from XML and show in the page. Actually I need to show only three nodes in the page. When click the view all button, need to display other nodes. Please help me to implement the code.
Here is the code.
function showCD(xml){
xml = $(xml).children();
$(xml).children().each(function () {
let TITLE = $(this).find("TITLE").text();
let ARTIST =$(this).find("ARTIST").text();
let COUNTRY = $(this).find("COUNTRY").text();
let COMPANY =$(this).find("COMPANY").text();
let html = `<div class="col-md-4">
<p>${TITLE}</p>
<p>${ARTIST}</p>
<p>${COUNTRY}</p>
<p>${COMPANY}</p>
</div>`;
$("#xmldata").append(html);
});
}
<div class="row" id="xmldata"></div>
<section>
<div class="container">
<input type="button" value="View All" id="myButton" class="reveal" onclick="toggler('toggle_container');">
<div id="toggle_container" class='hidden'>
<div class="block">
<div class="row" id="xmldata"></div>
</div>
</div>
</div>
</section>
test.xml
<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
<CD category="new">
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD category="hide">
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CATALOG>
It is just like below image.
http://next.plnkr.co/edit/KgmzSWEaIOBRf54M?open=lib%2Fscript.js&preview
I have updated your code as per your requirement Demo
instead of 2 separate xmldata & xmldataall divs you can use only one div & hide all the children > 2 index.
$(document).ready(function(){
$.ajax({
type:"GET",
url:"test.xml",
dataType:"xml",
success:showCD
});
});
function showCD(xml){
xml = $(xml).children();
let i = 0;
$(xml).children().each(function () {
let TITLE = $(this).find("TITLE").text();
let ARTIST =$(this).find("ARTIST").text();
let COUNTRY = $(this).find("COUNTRY").text();
let COMPANY =$(this).find("COMPANY").text();
let html = `<div class="col-md-4">
<p>${TITLE}</p>
<p>${ARTIST}</p>
<p>${COUNTRY}</p>
<p>${COMPANY}</p>
</div>`;
i++;
if(i <= 3) {
$("#xmldata").append(html);
$("#xmldataall").append(html);
}
else{
$("#xmldataall").append(html);
}
});
}
$('#myButton1').click(function () {
var self = this;
change(self);
});
function change(el) {
if (el.value === "View All")
el.value = "Hide All";
else
el.value = "View All";
}
function toggler(divId) {
$("#" + divId).toggleClass("hide");
$("#xmldata").toggle();
}
function directLinkModal(hash) {
$(hash).modal('show');
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="row" id="xmldata"></div>
<section>
<div class="container">
<input type="button" value="View All" id="myButton1" class="reveal" style="float: right;" onclick="toggler('toggle_container');">
<div id="toggle_container" class='hide'>
<div class="block">
<div class="row" id="xmldataall"></div>
</div>
</div>
</div>
</section>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Stop the video from playing

I have two videos on the same page and they open in an iframe. When I close the popup, the video won't stop. It keeps playing. Due to circumstances beyond my control, I have to work with the videos within iframes.
Could anyone help, below is the code for the same:
jQuery:
$("[data-media]").on("click", function(e) {
e.preventDefault();
var $this = $(this);
var videoUrl = $this.attr("data-media");
var popup = $this.attr("href");
var $popupIframe = $(popup).find("iframe");
$popupIframe.attr("src", videoUrl);
var left = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var left = left/2 - 340;
var top = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var top = top/2 - 180;
document.getElementById("vid").style.top = top + "px";
document.getElementById("vid").style.left = left + "px";
document.getElementById("vid1").style.top = top + "px";
document.getElementById("vid1").style.left = left + "px";
$this.closest(".page").addClass("show-popup");
});
$(".popup").on("click", function(e) {
e.preventDefault();
e.stopPropagation();
$(".page").removeClass("show-popup");
});
$(".popup > iframe").on("click", function(e) {
e.stopPropagation();
});
HTML:
<div class="popup" id="media-popup"> <!-- video embedded -->
<iframe id="vid" src="http://player.vimeo.com/video/1212121210?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe class="show-2" style="display: none;" id="vid1" src="http://player.vimeo.com/video/112324343?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<a class="video-close" href="#0"></a>
</div><!-- popup -->
<a id="video" data-media="//www.vimeo.com/134243242">video 1</a>
<a id="video" class="video-2" data-media="//www.vimeo.com/00102102">Video 2</a>
This helped me, check it out!
click here to go to the original answer
Basically you need to use iframe or video to start player and that code will stop it when you want it.
var stopVideo = function ( element ) {
var iframe = element.querySelector( 'iframe');
var video = element.querySelector( 'video' );
if ( iframe !== null ) {
var iframeSrc = iframe.src;
iframe.src = iframeSrc;
}
if ( video !== null ) {
video.pause();
}
};
To stop the video, not only pause it, you can set currentTime to 0 like:
video.pause()
video.currentTime = 0
This will 'reset' the src attribute for each iframe, stopping the video.
jQuery("iframe").each(function() {
var url = jQuery(this).attr('src');
jQuery(this).attr('src', url);
});
You can also run the following if the iframe is within your domain.
jQuery('iframe').contents().find('video').each(function ()
{
this.pause();
});
jQuery('video').each(function ()
{
this.pause();
});
http://plnkr.co/edit/BWPfY8PiYagfb1zIHUEV?p=preview
This plunker helped me to achieve the solution to my question.
HTML:
<head>
<title>Autostop Videos in Closed Modal</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link rel="stylesheet" href="style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Autostop Videos in Closed Modal</h1>
<ul class="nav" >
<li>Video 1</li>
<li>Video 2</li>
</ul>
<div class="modal fade" id="video1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" >
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Video 1</h4>
</div>
<div class="modal-body">
<iframe src="//player.vimeo.com/video/108792063" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="modal fade" id="video2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" >
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Video 2</h4>
</div>
<div class="modal-body">
<iframe src="//player.vimeo.com/video/69593757" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
JS:
$(function(){
$('.modal').on('hidden.bs.modal', function (e) {
$iframe = $(this).find("iframe");
$iframe.attr("src", $iframe.attr("src"));
});
});

JavaScript Function Switch Function Not Working

I recently posted a question and suggested this as an answer but it is not working. Why ?
<div class="text-center">
<embed src="https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf" width="300" height="300" type='application/pdf' id="thePdf">
</div>
<div class="button">
<button class="btn-info" type="button" onclick="switchPdf();">Search</button>
</div>
<script>
function switchPdf() {
var fileA = 'https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf',
fileB = 'https://www.setasign.com/files/demo-files/pdfs/tektown/Fact-Sheet.pdf',
elem = document.getElementById('thePdf');
elem.src = elem.src == fileA ? fileB : fileA;
}
</script>
Basically there is a default PDF which loads on page open, and once I click the button I want the pdf to change to the other pdf. But it is not working
changes to src attribute on <embed>, <object>, etc...
do not take affect
have to replace with a new element
function switchPdf() {
var fileA = 'https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf',
fileB = 'https://www.setasign.com/files/demo-files/pdfs/tektown/Fact-Sheet.pdf',
container = document.getElementById('thePdfContainer'),
elem = document.getElementById('thePdf');
var newFile = (elem.src === fileA) ? fileB : fileA;
container.innerHTML = '<embed src="' + newFile + '" width="300" height="300" type="application/pdf" id="thePdf">';
console.log(container.innerHTML);
}
<div id="thePdfContainer" class="text-center">
<embed src="https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf" width="300" height="300" type='application/pdf' id="thePdf">
</div>
<div class="button">
<button class="btn-info" type="button" onclick="switchPdf();">Search</button>
</div>

Angular JS displaying a specific ng-grid in a ng-repeat

Friends, i have a tree that is dynamically created from JSON. It also creates the grids that i want for a particular element on the tree and hides them all. Then i have a ng-click that shows it. My problem is that it shows ALL of them instead of the one that i want. For example, if user clicks on the header in 'Record 1' it should display the first grid and so on and so on. Here is my JSBin.
My HTML looks like this. Please see my JSBin for JavaScript file:
<body ng-controller="AbnTestController" style="margin:20px">
<button ng-click="try_changing_the_tree_data()" class="btn btn-default btn-sm">Submit File</button>
<p>
<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0">
<tr>
<!-- ============ LEFT COLUMN (TREE) ============== -->
<td width="250px" style="vertical-align:top" bgcolor="whitesmoke">
<div style="width:250px;background:whitesmoke;border:1px solid lightgray;border-radius:5px;">
<abn-tree ng-click="visible.grid = true" tree-data="my_data" tree-control="my_tree" on-select="my_tree_handler(branch)" expand-level="2"></abn-tree>
</div>
</td>
<!-- ============ RIGHT COLUMN (CONTENT) ============== -->
<td width="80%" valign="top" bgcolor="#d2d8c7">
<div style="vertical-align:top;">
<div ng-repeat="rule in rules">
<div ng-show="visible.grid == true" class="gridStyle" ng-grid="rule.grid" ></div>
</div>
<div id="results"></div>
</div>
</td>
</tr>
</table>
</p>
</body>
Here's a jsbin
HTML (diff):
<div ng-repeat="rule in rules">
<div
ng-show="rulesMap[rule.uid] == 'isVisible'"
class="gridStyle"
ng-grid="rule.grid"></div>
</div>
JavaScript remove calls to createGrids and:
$scope.my_tree_handler = function(branch) {
createGridsFromBranch(branch);
};
/*Function that builds the grid*/
$scope.rulesMap = {};
$scope.rules = [];
createGridsFromBranch = function(branch) {
var gridUid = 'g_'+branch.uid;
for(var i in $scope.rulesMap) {
$scope.rulesMap[i] = 'notVisible';
}
if($scope.rulesMap[gridUid]) {
$scope.rulesMap[gridUid] = 'isVisible';
return;
}
$scope.rulesMap[gridUid] = 'isVisible';
$scope.rules.push({
uid: gridUid,
grid: {
...
}
});

phonegap window.location not working with .html#page

At first sorry if i have some typing errors english is not my main language but i try to do my best to explain it at my best.
I am working on a test app with a note database.
It works fine with adding and deleting but there is a small problem...
At the moment that i add a note (on edit.html) and want to go back to the index.html page it is not going back.
i am working with multiple data-page-role pages so each page has his own id.
The code that i use for the note database:
index.html Header:
$("#homePage").live('pageinit', function() {
init();
});
index.html data-page-role
<div data-role="page" id="homePage" data-add-back-btn="true" class="noteclass">
<!-- HEader -->
<div data-role="header" >
<h1>Notitie Database</h1>
</div>
<!-- Main content div -->
<div data-role="content" id="mainContent">
<ul data-role="listview" id="noteTitleList"></ul><br />
</div>
<div data-role="content">
Voeg notitie toe
</div>
<!-- Footer -->
<div data-role="footer" id="footer"> <img src="a12.png" />
<p>© 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
Edit.html (here u can add/change/remove the notes)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div data-role="page" id="editPage">
<!-- HEader -->
<div data-role="header">
<h1>Write Note</h1>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#Delete').click(function() {
DeleteNote($('#noteId').val());
});
$('#addNote').click(function() {
var data = {title:$("#noteTitle").val(),
body:$("#noteBody").val(),
id:$("#noteId").val()
};
saveNote(data);
});
});
</script>
<div data-role="content">
<form id="editNoteForm" method="post">
<input type="hidden" name="noteId" id="noteId" value="">
<div data-role="fieldcontain">
<label for="noteTitle">Title</label>
<input type="text" name="noteTitle" id="noteTitle">
</div>
<div data-role="fieldcontain">
<label for="noteBody">Note</label>
<textarea name="noteBody" id="noteBody"></textarea>
</div>
<div data-role="fieldcontain">
<button id="addNote">Opslaan</button>
</div>
</form>
<button id="Delete">Verwijder</button>
</div>
Ga terug
<!-- Footer -->
<div data-role="footer" id="footer"> <img src="a12.png" />
<p>© 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
</body>
</html>
And here is the backend code that i use for the note database
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
phoneready();
}
function setupTable(tx){
tx.executeSql("CREATE TABLE IF NOT EXISTS notes(id INTEGER PRIMARY KEY,title,body,updated)");
}
function getEntries() {
dbShell.transaction(function(tx)
{
tx.executeSql("select id,title,body, updated from notes order by id asc", dbErrorHandler, renderEntries)
}, function(){ alert ("Error getentries");
});
}
function renderEntries(tx,results){
if (results.rows.length == 0) {
$("#mainContent").html("<p>Je hebt nog geen notities.</p>");
} else {
var s = "";
for(var i=0; i<results.rows.length; i++) {
s += "<li><a href='edit.html?id="+results.rows.item(i).id + "'>" + results.rows.item(i).title + "</a></li>";
}
$("#noteTitleList").html(s);
$("#noteTitleList").listview("refresh");
}
}
function saveNote(note) {
//Sometimes you may want to jot down something quickly....
if(note.title == "") note.title = "[Geen Titel]";
dbShell.transaction(function(tx) {
if(note.id == "")
{
tx.executeSql("insert into notes(title,body,updated) values(?,?,?)",[note.title,note.body, new Date()]);
}
else
{
tx.executeSql("update notes set title=?, body=?, updated=? where id=?",[note.title,note.body, new Date(), note.id]);
}
}, function(){ alert ("Error savenote");},
function()
{
window.navigator.location("index.html#homePage");
});
}
function DeleteNote(id){
dbShell.transaction(
function(tx)
{
tx.executeSql('Delete FROM notes where id=' + id);
},
function(){ alert ("Error deletenote");},
function(err)
{
window.navigator.location("index.html#homePage");
});
}
function phoneready(){
dbShell = window.openDatabase("SimpleNotes", 2, "SimpleNotes", 1000000);
setupTable();
}
function init(){
getEntries();
//edit page logic needs to know to get old record (possible)
$("#editPage").live("pagebeforeshow", function() {
//get the location - it is a hash - got to be a better way
var loc = window.location.hash;
if(loc.indexOf("?") >= 0) {
var qs = loc.substr(loc.indexOf("?")+1,loc.length);
var noteId = qs.split("=")[1];
//load the values
dbShell.transaction(
function(tx) {
tx.executeSql("select id,title,body from notes where id=?",[noteId],function(tx,results) {
$("#noteId").val(results.rows.item(0).id);
$("#noteTitle").val(results.rows.item(0).title);
$("#noteBody").val(results.rows.item(0).body);
});
}, dbErrorHandler);
}
});
}
As u can see at saveNote and on deleteNote i call the function window.navigator.location("index.html#homePage");
I did this as far as i tried with $.mobile.changePage("index.html#homePage"); it will go back but then it won't run the init(); function at the header script.
I hope i explained it all correct and if there are any questions please let me know.
I will try then to do my best at explaining it.
edit:
More information:
At first thank you for your answer, i got multiple data-role-pages.
A extra example:
<div data-role="page" id="page5" data-add-back-btn="true">
<!-- Header -->
<div data-role="header" >
<h1>Locatie</h1>
</div>
<!-- Main content div -->
<div data-role="content">
<p id="geolocation" onClick="onDeviceReady()">Op zoek naar uw locatie ...</p>
<img src="" id="map" width="100%" height="" />
<h4>Omgeving</h4>
<img src="" id="map2" width="100%" height="" />
</div>
<div data-role="footer" id="footer"> <img src="a12.png" />
<p>© 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
You are trying to change page with deep link "index.html#homePage" .
JqueryMobile does not support that. When you pass a file, he will load ONLY the first page of that file.
This means that when you pass "index.html#homePage", he'll only consider the "index.html" and load the first page on that file.
I don't know it for sure, but if in your index.html file only have the "homePage", change function window.navigator.location to:
$.mobile.changePage("index.html")
And of course do the same for the anchor tag .
I use:
window.location = "#home";

Categories