Goal: populate all fields in the 'nested' password protected page using Selenium python. The pages include Angular code. See screenshot 1. The nesting is within Section 1 - General as all the content therein comes from a different source than the rest of the page. Screenshot 2 shows that mouse-over the circular buttons 1, 2, or 3 displays a different URL in the footer than the address of the 'parent' page itself.
I've tried this code to find the Lease Acres and I get NoSuchElementException:
elm = browser.find_element_by_xpath("//input[#ng-model='section1.data.generalSection1.leaseInfo.leaseNumberLeaseAcres']")
Also, I run this:
browser.page_source
And it provides the 'parent' page HTML.
NB in Chrome, doing Save Page As... saves the 'parent' and associated .html files as well; one of those does have the HTML for the Lease Acres etc. (frame).
Parent Page
Mouse-over the 1,2, or 3 links
Here is the HTML of the 'parent' page (again, none of the HTML for the 'child' section (Lease Acres etc.) is herein):
<!-- saved from url=(0216)https://afmss.blm.gov/bizflow/portal/wih/basicwih.jsp?sid=0000001001&pid=49479&archive=n&wid=101&ro=n&openpage=page&bizcovecall=y&currow=0&bizcoveid=&wihMode=BASIC_NONE&wihnoactions=&caller=&cu=&tmpTime=1589467253908 -->
<html lang="en" class="x-border-box x-quirks"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="https://afmss.blm.gov/bizflow/favicon.ico" type="image/x-icon">
<title>Activity - Submit APD in APD Process</title>
<link href="./Activity - Submit APD in APD Process_files/commoncss.mres.1512659262000.css" rel="stylesheet" type="text/css">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
li {clear:both !important}
</style>
<!--[if lt IE 9]>
<link href="/bizflow/themes/oceanblue/ielte8.css.1512659261000.css" rel="stylesheet" type="text/css"/>
<![endif]-->
<link href="./Activity - Submit APD in APD Process_files/discussion.css.1512659261000.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./Activity - Submit APD in APD Process_files/ext-all.css">
<link href="./Activity - Submit APD in APD Process_files/wih.css.1512659262000.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./Activity - Submit APD in APD Process_files/font-awesome.css">
<script type="text/javascript" src="./Activity - Submit APD in APD Process_files/ext-all.js.1512659306000.js.download"></script>
<script type="text/javascript" src="./Activity - Submit APD in APD Process_files/bfcommon-jsutil-stringutil-urlutil-modalwin-modalpopupclient-positionutil-customcommon-date.1512659289000.js.download"></script><script language="javascript">
var __bfcommonLoaded = true;
var __enableWebBrowserContextMenu = true;
</script>
<style type="text/css">
div.popupbody{}
</style>
<script language="javascript">var __modalWindowMode = true;var __modalWIHMode = true;var __modalMonitorMode = true;</script><style type="text/css">
#WINDOW_TITLE { display:none;}
</style>
<script type="text/javascript" src="./Activity - Submit APD in APD Process_files/bizflow.calendar.en.js.1589436531000.js.download"></script><script type="text/javascript" src="./Activity - Submit APD in APD Process_files/bizflow.stringtable.en.js.1589436531000.js.download"></script><script type="text/javascript" src="./Activity - Submit APD in APD Process_files/bizflow.wih.en.js.1589436531000.js.download"></script>
<script type="text/javascript" src="./Activity - Submit APD in APD Process_files/hwmodal-webutil-jquery-1.7.2.min-jquery-ui-1.8.18.custom-jquery.blockUI-jquery.form-mustache.min-discussion-layoutstore-base64-basicwih-userinfo..download"></script>
<script type="text/javascript" src="./Activity - Submit APD in APD Process_files/cookie.js.1512659284000.js.download"></script>
<script language="javascript">
<!--
function setApplicationAdditionalTitle(appid, name)
{
$("#appTitle"+appid, WIH_application.document).html(" " + name);
}
var currentAction = null;
function navigateUrlApp(action)
{
WIH_application.navigateUrlApp(action);
if ("undefined" != typeof(action)) {
currentAction = action;
}
}
function closeOEInitiateForm()
{
if(currentAction == "NewTaskFromMail")
{
navigateUrlApp("ViewMail");
}
}
function reloadApplication()
{
WIH_application.navigateUrlApp();
}
contextPath = "/bizflow";
processId = 49479;
workId = 101;
useAccessibility = false;
layoutStore = new LayoutStore({contextPath:contextPath});
try{
wihLayoutState = {supplementalTool: {isClosed:true}, instruction: {isClosed:true}, processMap: {isClosed:true}};
if(typeof(wihLayoutState) != 'object')
{
wihLayoutState = {supplementalTool: {isClosed:true}, instruction: {isClosed:true}, processMap: {isClosed:true}};
}
if(useAccessibility)
{
supplementalToolLayoutState().isClosed = false;
instructionLayoutState().isClosed = false;
}
displayStatus.instruction = !instructionLayoutState().isClosed;
displayStatus.supplementalTools = !supplementalToolLayoutState().isClosed;
}
catch(e)
{}
var enableOpenMultipleWIH = false;
var isArchivedProcess = false;
var activityInfo = 0;
var activityAuthority = 768;
var displayCloseMessage = false;
var openPageName = "page";
var bContinue;
var basicWihReadOnly = "n";
var imageBasePath = "/bizflow/themes/oceanblue";
var isNoneUI = true;
setContextRoot(contextPath);
setCookie('WIHSTYLE', "Basic", "MAX", '/');
function init()
{
bizcoveId = '';
Ext.require(['Ext.util.*']);
_readOnly = false;
_msgtype = "null";
setWIHOption("completionWindow", false);
setCurrentUserId("0000006305");
setWindowTitle("Activity - Submit APD in APD Process");
setLocalCacheKey("49479-13-101");
saveOpenTimestamp();
_readCommentRequired = false;
window.setTimeout(function(){sessionKeepAlive()}, SESSION_KEEP_ALIVE_TIME);
if(typeof(makeMenu) != 'undefined')
{
makeMenu();
}
wihDiscussion = new Discussion("table_commentList", "0000001001",
49479,
13,
101,
false,
"0000006305",
contextPath, imageBasePath,
{ME:"Me",
DISCUSSION_PREP_ON: bfMESSAGES.wih.DISCUSSION_PREP_ON,
TIP_MODIFY_COMMENT: bfMESSAGES.wih.TIP_MODIFY_COMMENT,
TIP_DELETE_COMMENT: bfMESSAGES.wih.TIP_DELETE_COMMENT,
MSG_PLEASE_WAIT: bfMESSAGES.wih.MSG_PLEASE_WAIT,
MSG_DISCUSSION_ENTER: bfMESSAGES.wih.MSG_DISCUSSION_ENTER,
MSG_WIH_CANNOT_MODIFY_DISCUSSION: bfMESSAGES.stringtable.MSG_WIH_CANNOT_MODIFY_DISCUSSION,
MSG_WIH_CANNOT_DELETE_DISCUSSION: bfMESSAGES.stringtable.MSG_WIH_CANNOT_DELETE_DISCUSSION,
MSG_ADDED_NEW_COMMENT: bfMESSAGES.wih.MSG_ADDED_NEW_COMMENT,
MSG_THERE_ARE_NEW_COMMENTS: bfMESSAGES.wih.MSG_THERE_ARE_NEW_COMMENTS,
FROM_PROCESS: bfMESSAGES.wih.FROM_PROCESS,
COMMENT_TYPE_REPLY: bfMESSAGES.wih.COMMENT_TYPE_REPLY,
COMMENT_TYPE_FORWARD: bfMESSAGES.wih.COMMENT_TYPE_FORWARD,
COMMENT_TYPE_COMPLETE: bfMESSAGES.wih.COMMENT_TYPE_COMPLETE},
{modify:true});
window.setTimeout(function(){
wihDiscussion.load();
}, 1);
window.setTimeout(function(){
$('#WIH_action').attr("src", contextPath + "/bizcoves/wih/action.jsp?basicWihReadOnly=" + basicWihReadOnly + "&currow=0&bizcoveid=&caller=&wihnoactions=&showActionButton=n&archive=n&processId="+processId + "&workId=" + workId);
$('#WIH_application').attr("src", contextPath + "/bizcoves/wih/applist.jsp?basicWihReadOnly=" + basicWihReadOnly + "&noAppBtn=true&processId="+processId + "&workId=" + workId);
}, 1);
}
function checkReadComment()
{
return false;
}
var openPageName = "page";
function ShowWindow(newURL, newName, strTitle, width, height, scroll)
{
var obj = top;
var l = screen.width/2 - width/2;
var t = screen.height/2 - height/2;
var win = window.open(newURL, newName, "left="+l+",top="+t+",width="+width+",height="+height + ",scrollbars=" + scroll );
return win;
}
function ShowWindowWithObject(newURL, newName, strTitle, width, height, scroll, objectName)
{
return ShowWindow(newURL, newName, strTitle, width, height, scroll);
}
//-->
</script>
<script type="text/javascript">
try{
// $(window).unload(window_onbeforeunload);
$(window).bind("beforeunload", window_onbeforeunload);
// window.attachEvent("onbeforeunload", window_onbeforeunload);
// window.attachEvent("onunload", window_onbeforeunload);
} catch(e){};
$(window).resize(function(){if(isModalWindowMode()){modalWindowOnResize()}});
function getAttachmentAccordionTitle()
{
var accordionTitle = "<div style='float:left;' >"+ bfMESSAGES.wih.ATTACHMENT + " </div>";
return accordionTitle;
}
function getInternalDiscussionAccordionTitle() {
var accordionTitle = "<div style='float:left;' >"+bfMESSAGES.wih.DISCUSSION+" </div>";
accordionTitle += '<div style="float:right"><button title="' + bfMESSAGES.wih.ADD_NEW_DISCUSSION + '" class="accordionNewColorButton" id="btnAddDiscussion" onclick="return addNewDiscussion(event)" >' + bfMESSAGES.wih.ADD_NEW_DISCUSSION + '</button>' +
'<button title="Refresh" class="accordionRefreshButton" id="btnRefreshDiscussion" onclick="reloadDiscussion({event:event});"><i class="fa fa-refresh"></i></button></div>';
return accordionTitle;
}
function addNewDiscussion(event) {
var ret = openDiscussionPopup({"processId": "", "mode": "New", "commID": ""}, processId, workId);
try {event.stopPropagation();} catch(e){};
return false;
}
function addTab() {
WIH_application.addTab("New Correspondence", "http://www.bizflow.com");
return false;
}
function openNewCorrespondence(event) {
openPopup(contextPath + "/correspondence/newCorrespondence_step1.jsp?&processId="+processId + "&workId=" + workId, bfMESSAGES.wih.NEW_CORRESPONDENCE, "newCorrespondence", 1000, 800);
try {event.stopPropagation();} catch(e){};
return false;
}
function getCorrespondenceAccordionTitle() {
var attachmentTitle = "<div style='float:left;' >"+bfMESSAGES.wih.CORRESPONDENCE+" </div>";
attachmentTitle += "<div style='float:left;display:none' class='countButton' id='lengthOfCorrespondence'>0</div>";
attachmentTitle += '<div style="float:right"><button title="' + bfMESSAGES.wih.ADD_NEW_CORRESPONDENCE + '" class="accordionNewColorButton" id="btnAddCorrespondence" onclick="return openNewCorrespondence(event);" >' + bfMESSAGES.wih.ADD_NEW_CORRESPONDENCE + '</button>' +
'<button title="Refresh" class="accordionRefreshButton" id="btnRefreshCorrespondence" onclick="reloadCorrespondence({event:event});"><i class="fa fa-refresh"></i></button></div>';
return attachmentTitle;
}
function setCorrespondenceLength(length) {
$("#lengthOfCorrespondence").html(length);
if(0 == length) {
$("#lengthOfCorrespondence").hide();
} else {
$("#lengthOfCorrespondence").show();
}
}
</script></head>
<body style="margin:0; border:0;background-color:lightgray;" class="x-body x-webkit x-chrome x-reset" id="ext-gen1018">
<div id="notify"></div>
<script>
$(document).ready(function(){
init();
});
</script>
<div class="wih-toolbar-buttons" style="overflow:hidden;display:none;height:0px;" id="menubar">
<div id="menuToolbar" style="width:100%"></div>
<iframe id="WIH_action" name="WIH_action" title="Action frame" style="display:none" src="./Activity - Submit APD in APD Process_files/action.html" width="1px" height="1px"></iframe>
</div>
<div id="divApplicationTab" style="display: none; height: 18px;">
<iframe id="WIH_application" name="WIH_application" title="Application frame" style="display: none; height: 18px;" src="./Activity - Submit APD in APD Process_files/applist.html" width="100%" height="25px" marginheight="0" marginwidth="0" border="0" frameborder="0" framespacing="0" noresize="" scrolling="no"></iframe>
</div>
<iframe id="WIH_information" name="WIH_information" title="Information frame" src="./Activity - Submit APD in APD Process_files/saved_resource.html" width="100%" height="100%" marginheight="0" marginwidth="0" border="0" frameborder="0" framespacing="0"></iframe>
<div id="appListBox2" class="appListBoxOuter" style="display: none;"></div>
<form id="ajaxForm"></form>
<div class="wih-supplemental-tools wih-supplemental-tools-panel" id="wihSupplementalTools" style="display:none">
<div class="accordion_menu" style="overflow: hidden;height:100%" id="wihAttachments">
<button style="margin-top: 10px;margin-left: 10px" class="colorButton" title="Add new" onclick="openAddAttachmentWin()">Add new</button>
<div class="content-west accordion_menu" style="height:100%">
<div class="wih-attachments" id="WIH_attachment">
<div class="loaderIcon">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i>
</div>
<span class="not-enabled-attachment">Attachments are not supported for this activity.</span>
...
LINES CUT TO REDUCE LENGTH
...
<link href="./Activity - Submit APD in APD Process_files/dhtmlwindow.css.1512659262000.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./Activity - Submit APD in APD Process_files/dhtmlwindow.js.1512659288000.js.download" bridgetranslation="no"></script><div id="dhtmlwindowholder"><span style="display:none">.</span></div>
<script type="text/javascript" src="./Activity - Submit APD in APD Process_files/bfcommon-jsutil-stringutil-urlutil-modalwin-modalpopupclient-positionutil-customcommon-date.1512659289000.js.download"></script>
<script type="text/javascript" bridgetranslation="no" src="./Activity - Submit APD in APD Process_files/modalpopup-modalpopupapi-urlutil.1512659289000.js.download"></script>
<script type="text/javascript" bridgetranslation="no">
// set bridgetranslation to no for Bizflow Bridge not to change URL.
// bug18547: All dialog in Outlook open with HTTP 500 error
// in case of plumtree, plumtree does not handle a code to load a url in a js so make a exposed function on jsp and call it
function loadFrameURL(obj, url)
{
var loaded = false;
var __bizcoveId = getUrlValue(url, "__bizcoveId");
if(null != __bizcoveId && __bizcoveId.length > 0)
{
var func = eval("typeof(loadFrameURL" + __bizcoveId + ")");
if("undefined" != func)
{
func = eval("loadFrameURL" + __bizcoveId);
func(obj, url);
loaded = true;
}
}
if(loaded == false)
{
obj.src = url;
}
}
</script>
<style type="text/css">
a span.separator {
border-right: 1px solid #c0c0c0;
border-left: 1px solid #e6e6e6;
margin: 0 2px 0 2px;
width: 0;
}
</style>
<div id="modalPopupMax0Overlay" style="padding:0;position:absolute;background-color:#000000;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;left:0px;top:0px;display:none;width:100%;height:100%">
</div>
<div id="modalPopupMax0" class="ui-corner-all" style="border: 1px solid #aaa;box-shadow: #606060 10px 10px 20px;overflow: hidden; padding: 0; position: absolute; display: none;" onselectstart="return false">
<table class="ui-corner-all" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><!-- title bar -->
<div class="ui-corner-top" id="modalPopupMax0TitleBarBox" style="height:33px;width:100%;margin:0;border:0;padding:0;overflow:hidden;background-color:#f0f0f0;border-bottom: 1px solid #FFFFFF;">
<table class="popup ui-corner-top" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:transparent">
<tbody><tr>
<td nowrap="">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td _width="99%" valign="middle" nowrap="">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><span id="modalPopupMax0Title" class="title" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></span></td>
<td><div id="modalPopupMax0SubTitle" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></div></td>
</tr>
</tbody></table>
</td>
<td style="vertical-align: middle" align="right" id="modalPopupMaxCell0">
<table cellpadding="0" cellspacing="0">
<tbody><tr><td class="modal-toolbar-holder"><div id="toolbarHolder0"></div></td><td>
<a href="javascript:_close();" id="modalPopupMax0CloseButton" accesskey="C" title="Close">
<span class="closeBtnIcon"></span>
</a>
</td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
</td>
</tr>
<tr>
<td><!-- popup content -->
<div id="modalPopupMax0Content" class="ui-corner-bottom" style="background-color:#ffffff;padding:0;overflow:hidden;width:100% !important;height:100%">
<iframe id="modalPopupMax0Frame" class="bizCoveModalContentArea" title="modalPopupMax0Frame" name="modalPopupMax0Frame" align="middle" marginheight="0" marginwidth="0" frameborder="0" scrolling="0" src="./Activity - Submit APD in APD Process_files/saved_resource(1).html">
</iframe>
</div>
</td>
</tr>
</tbody></table>
</div>
<style type="text/css">
a span.separator {
border-right: 1px solid #c0c0c0;
border-left: 1px solid #e6e6e6;
margin: 0 2px 0 2px;
width: 0;
}
</style>
<div id="modalPopupMax1Overlay" style="padding:0;position:absolute;background-color:#000000;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;left:0px;top:0px;display:none;width:100%;height:100%">
</div>
<div id="modalPopupMax1" class="ui-corner-all" style="border: 1px solid #aaa;box-shadow: #606060 10px 10px 20px;overflow: hidden; padding: 0; position: absolute; display: none;" onselectstart="return false">
<table class="ui-corner-all" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><!-- title bar -->
<div class="ui-corner-top" id="modalPopupMax1TitleBarBox" style="height:33px;width:100%;margin:0;border:0;padding:0;overflow:hidden;background-color:#f0f0f0;border-bottom: 1px solid #FFFFFF;">
<table class="popup ui-corner-top" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:transparent">
<tbody><tr>
<td nowrap="">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td _width="99%" valign="middle" nowrap="">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><span id="modalPopupMax1Title" class="title" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></span></td>
<td><div id="modalPopupMax1SubTitle" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></div></td>
</tr>
</tbody></table>
</td>
<td style="vertical-align: middle" align="right" id="modalPopupMaxCell1">
<table cellpadding="0" cellspacing="0">
<tbody><tr><td class="modal-toolbar-holder"><div id="toolbarHolder1"></div></td><td>
<a href="javascript:_close();" id="modalPopupMax1CloseButton" accesskey="C" title="Close">
<span class="closeBtnIcon"></span>
</a>
</td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
</td>
</tr>
<tr>
<td><!-- popup content -->
<div id="modalPopupMax1Content" class="ui-corner-bottom" style="background-color:#ffffff;padding:0;overflow:hidden;width:100% !important;height:100%">
<iframe id="modalPopupMax1Frame" class="bizCoveModalContentArea" title="modalPopupMax1Frame" name="modalPopupMax1Frame" align="middle" marginheight="0" marginwidth="0" frameborder="0" scrolling="0" src="./Activity - Submit APD in APD Process_files/saved_resource(2).html">
</iframe>
</div>
</td>
</tr>
</tbody></table>
</div>
<style type="text/css">
a span.separator {
border-right: 1px solid #c0c0c0;
border-left: 1px solid #e6e6e6;
margin: 0 2px 0 2px;
width: 0;
}
</style>
...
2 3 4 and 5 OMITTED
...
<style type="text/css">
a span.separator {
border-right: 1px solid #c0c0c0;
border-left: 1px solid #e6e6e6;
margin: 0 2px 0 2px;
width: 0;
}
</style>
<div id="modalPopupMax6Overlay" style="padding:0;position:absolute;background-color:#000000;filter:alpha(opacity=10);-moz-opacity:0.1;opacity:0.1;left:0px;top:0px;display:none;width:100%;height:100%">
</div>
<div id="modalPopupMax6" class="ui-corner-all" style="border: 1px solid #aaa;box-shadow: #606060 10px 10px 20px;overflow: hidden; padding: 0; position: absolute; display: none;" onselectstart="return false">
<table class="ui-corner-all" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><!-- title bar -->
<div class="ui-corner-top" id="modalPopupMax6TitleBarBox" style="height:33px;width:100%;margin:0;border:0;padding:0;overflow:hidden;background-color:#f0f0f0;border-bottom: 1px solid #FFFFFF;">
<table class="popup ui-corner-top" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:transparent">
<tbody><tr>
<td nowrap="">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td _width="99%" valign="middle" nowrap="">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><span id="modalPopupMax6Title" class="title" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></span></td>
<td><div id="modalPopupMax6SubTitle" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></div></td>
</tr>
</tbody></table>
</td>
<td style="vertical-align: middle" align="right" id="modalPopupMaxCell6">
<table cellpadding="0" cellspacing="0">
<tbody><tr><td class="modal-toolbar-holder"><div id="toolbarHolder6"></div></td><td>
<a href="javascript:_close();" id="modalPopupMax6CloseButton" accesskey="C" title="Close">
<span class="closeBtnIcon"></span>
</a>
</td></tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
</td>
</tr>
<tr>
<td><!-- popup content -->
<div id="modalPopupMax6Content" class="ui-corner-bottom" style="background-color:#ffffff;padding:0;overflow:hidden;width:100% !important;height:100%">
<iframe id="modalPopupMax6Frame" class="bizCoveModalContentArea" title="modalPopupMax6Frame" name="modalPopupMax6Frame" align="middle" marginheight="0" marginwidth="0" frameborder="0" scrolling="0" src="./Activity - Submit APD in APD Process_files/saved_resource(7).html">
</iframe>
</div>
</td>
</tr>
</tbody></table>
</div>
<!--
Do not delete this dummy form. this form is to get the url of blank html page for portal bridge
//-->
<form action="https://afmss.blm.gov/bizflow/includes/modalpopup/blank.jsp" name="blankform">
</form>
<script type="text/javascript">
var __basePath = "/bizflow";
var __currentModalIndex = -1;
var maxModalCount = 7;
var maxModalIndex = maxModalCount - 1;
var _browser = "NS";
</script>
<script type="text/javascript">
useLayoutFramework = false;
function getWIHActionFrame() {
return this.frames["WIH_action"];
}
</script>
<input type="hidden" name="_orgContextInfoData" id="_orgContextInfoData" value="...">
</body></html>
This was a matter of switching to the right frame. From FAQs
Q: How do I type into a contentEditable iframe?
A: Assuming that the iframe is named "foo":
driver.switchTo().frame("foo");
WebElement editable = driver.switchTo().activeElement();
editable.sendKeys("Your text here");
Related
I'm trying to center a card on the page and center the text within that card. Here is the CSS I've attempted below. And It seems to do nothing. I am trying to use JS for the first time with CSS. Confusion about where I'm messing up, so not entirely sure what part to isolate to share.
sample here: https://rrrhhhhhhhhh.github.io/sentences/
Thank you
CSS
.testclass {
font: 10px courier, courier new;
background: #ffffff;
z-index: 10;
layer-background-color: #ffffff;
}
#test {
position: absolute;
top: 10px;
left:10px;
padding: 0px;
}
#rel {
position: relative;
align: center;
}
html and js
}
function writit(text,id)
{
if (document.getElementById)
{
x = document.getElementById(id);
x.innerHTML = '';
x.innerHTML = text;
}
else if (document.all)
{
x = document.all[id];
x.innerHTML = text;
}
else if (document.layers)
{
x = document.layers[id];
l = (480-(getNumLines(text)*8))/2;
w = (764-(getWidestLine(text)*8))/2;
text2 = '<td id=rel align="center" CLASS="testclass" style="font:12px courier,courier new;padding-left:' + w.toString() + 'px' + ';padding-top:' + l.toString() + 'px' + '">' + text + '</td>';
x.document.open();
x.document.write(text2);
x.document.close();
}
}
function getNumLines(mystr)
{
var a = mystr.split("<br>")
return(a.length);
}
function getWidestLine(mystr)
{
if (mystr.indexOf(" ") != -1)
{
re = / */g;
mystr = mystr.replace(re,"Z");
//alert(mystr);
}
if (mystr.indexOf("<u>") != -1)
{
re = /<u>*/g;
mystr = mystr.replace(re, "");
re = /<\/u>*/g;
mystr = mystr.replace(re, "");
}
if (mystr.indexOf("<br>") != -1)
{
var ss, t;
var lngest;
ss = mystr.split("<br>");
lngest = ss[0].length;
for (t=0; t < ss.length; t++)
{
if (ss[t].length > lngest)
{
lngest = ss[t].length;
}
}
}
else {
lngest = mystr.length;
}
return(lngest);
}
// -->
</script>
<body bgcolor="gainsboro" onload="startup();">
<table bgcolor="white" border height="480px" width="764px" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table nowrap>
<tr>
<td><img width="700px" height="1px" src="./resources/images/w.gif"></td>
<td>
<div class="testclass" id="test"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<center>
<form>
<p>
<input type="button" onclick="doBack(); return false" value="Back">
<input type="button" onclick="doNext(); return false" value="Next">
</p>
</form>
</center>
</body>
</html>
Just notice this without js
.testclass {
font: 10px courier,courier new;
background: #ffffff;
z-index: 10;
layer-background-color: #ffffff;
}
#test {position: absolute;
top: 10px;
left:10px;
padding: 0px;
}
#rel {position: relative;
align: center;
}
.center-div{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
<!Doctype html>
<html>
<head>
<title>Robert Grenier - Sentences</title>
</head>
<body>
<div class="center-div">
<table bgcolor="white" border height="480px" width="764px" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table nowrap>
<tr>
<td><img width="700px" height="1px" src="./resources/images/w.gif"></td>
<td>
<div class="testclass" id="test"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<center>
<form>
<p>
<input type="button" onclick="doBack(); return false" value="Back">
<input type="button" onclick="doNext(); return false" value="Next">
</p>
</form>
</center>
</div>
</body>
</html>
I am using an unattached Google Apps Script to send a formatted HTML email. I'm trying to attach inline images to the formatted HTML file, and the email works perfectly, and the images are inline in the email, but they are inline at the very bottom of the email, rather than where I wanted them to be.
The Script I am using is directly below, and the HTML email is below that.
function sendInlineImages() {
var email = [Email address]
var subject = "Email Subject";
var body= HtmlService.createHtmlOutputFromFile('moving').getContent();
// Image URLs, under CC license
var jasper1URL = "http://cat-bounce.com/cb.png";
var jasper2URL = "http://cat-bounce.com/cb.png";
var jasper3URL = "http://cat-bounce.com/cb.png";
// Fetch images as blobs, set names for attachments
var jasper1 = UrlFetchApp
.fetch(jasper1URL)
.getBlob()
.setName("jasper1URL");
var jasper2 = UrlFetchApp
.fetch(jasper2URL)
.getBlob()
.setName("jasper2URL");
var jasper3 = UrlFetchApp
.fetch(jasper3URL)
.getBlob()
.setName("jasper3URL");
var htmlEverything = body +
'<img src="cid:jasper1URL" alt="Jasper 1" width="220">'
+ '<img src="cid:jasper2URL" alt="Jasper 2" width="220">'
+ '<img src="cid:jasper3URL" alt="Jasper 3" width="200">'
// Send message with inlineImages object, matching embedded tags.
GmailApp.sendEmail(email, subject, "",
{ htmlBody: htmlEverything,
inlineImages:
{
jasper1URL: jasper1,
jasper2URL: jasper2,
jasper3URL: jasper3,
}
});
}
The HTML email is here, and the images are located in a nested table.
<!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"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'/>
<title>Page title</title>
<style type="text/css">
#media screen and (max-width: 630px) {
}
</style>
</head>
<body style="padding:0; margin:0">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0" width="630px">
<tr>
<td align="center" valign="top" style="padding-bottom: 15px;" bgcolor="#fff">
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#000" style="padding-bottom: 5px; font-family: Montserrat, Verdana, sans-serif; font-size: 24px;">
<h1><font color="#fff">Information for you!</font></h1>
<h4><font color ="#fff">Additional Stuff
<p>From,</p>
<p>Me</p>
</font></h4>
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom: 15px;" bgcolor="#d3d3d3">
</td>
</tr>
<tr bgcolor="#000">
<td align="center" valign="top">
<table border="0" cellpadding="10" bgcolor="#000" cellspacing="0" width="630" id="emailContainer">
<tr>
<td align="left" valign="top" >
<img src="cid:jasper1URL" alt="Jasper 1" width="220"></img>
</td>
<td align="center" valign="top" width="200">
<img src="cid:jasper2URL" alt="Jasper 2" width="200"></img>
</td>
<td align="right" valign="top" width="200px" >
<img src="cid:jasper3URL" alt="Jasper 3" width="200"></img>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#000" valign="top">
</td>
</tr>
<tr>
<td align="center" bgcolor="#d3d3d3" valign="top" style="padding-top: 15px; padding-bottom: 15px; font-family: Monteserrat, Verdana, sans-serif;">
<font color="#000">Stuff that should be here in the email</font>
</td>
</tr>
<tr>
<td align="center" bgcolor="#000" valign="top">
</td>
</tr>
</table>
</body>
</html>
They appear at the end of the email because of the following code:
var htmlEverything = body +
'<img src="cid:jasper1URL" alt="Jasper 1" width="220">'
+ '<img src="cid:jasper2URL" alt="Jasper 2" width="220">'
+ '<img src="cid:jasper3URL" alt="Jasper 3" width="200">'
Your Html code already defines the location of images in the nested table, by addding img tags to the end of html code as done above. You are causing the inline image to be duplicated to bottom of the email.
Modify this to
var htmlEverything = body
And that should prevent the images from appearing at the bottom of the email
YOur final code:
function sendInlineImages() {
var email = [Email address]
var subject = "Email Subject";
var body= HtmlService.createHtmlOutputFromFile('moving').getContent();
// Image URLs, under CC license
var jasper1URL = "http://cat-bounce.com/cb.png";
var jasper2URL = "http://cat-bounce.com/cb.png";
var jasper3URL = "http://cat-bounce.com/cb.png";
// Fetch images as blobs, set names for attachments
var jasper1 = UrlFetchApp
.fetch(jasper1URL)
.getBlob()
.setName("jasper1URL");
var jasper2 = UrlFetchApp
.fetch(jasper2URL)
.getBlob()
.setName("jasper2URL");
var jasper3 = UrlFetchApp
.fetch(jasper3URL)
.getBlob()
.setName("jasper3URL");
var htmlEverything = body
// Send message with inlineImages object, matching embedded tags.
GmailApp.sendEmail(email, subject, "",
{ htmlBody: htmlEverything,
inlineImages:
{
jasper1URL: jasper1,
jasper2URL: jasper2,
jasper3URL: jasper3,
}
});
}
Your Html code remains the same!
I need a valid code for my blog(blogger) to get Title of YouTube video using the following string:
"http://gdata.youtube.com/feeds/api/videos/EDV-KMBvMck?v=2&alt=json&prettyprint=true"
(This string works well in Internet Explorer)
I have gone through various method found here, but no result are displaying.
I would like to display the titles of the videos within td tag.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
table#t01 {
width: 100%;
}
table#t01,
th,
td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
</style>
</head>
<body>
<div>
<table id="t01">
<col style="width:50%;">
<col style="width:50%;">
<tr>
<td>
<img src="https://img.youtube.com/vi/EDV-KMBvMck/default.jpg"" alt="YouTube Icon">
</td>
<td>
<script>
$Video_Id = 'EDV-KMBvMck'
$.getJSON("http://gdata.youtube.com/feeds/api/videos/{$Video_Id}?v=2&alt=json&prettyprint=true", function(json) {
console.log("success");
var items = [];
$.each(json. {
$Video_Id
}, function(key1, val1) {
$Value = val1.key + val1.val
});
echo $Value
})
.done(function() {
console.log("second success");
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
})
.error(function(error) {
console.log(error);
});
</script>
</td>
</tr>
<tr>
<td>
<img src="https://img.youtube.com/vi/yXL7dT7ovEM/default.jpg"" alt="YouTube Icon">
</td>
<td>
<script>
$Video_Id = 'yXL7dT7ovEM'
$.getJSON("http://gdata.youtube.com/feeds/api/videos/{$Video_ID}?v=2&alt=json&prettyprint=true", function(json) {
console.log("success");
var items = [];
$.each(json. {
$Video_Id
}, function(key1, val1) {
$Value = val1.key + val1.val
});
echo $Value
})
.done(function() {
console.log("second success");
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
})
.error(function(error) {
console.log(error);
});
</script>
</td>
</tr>
</table>
</div>
</body>
</html>
I would like a function in header which will call from td tag at every change of Video_Id.
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/W-Q7RMpINVo" frameborder="0" allowFullScreen></iframe>
paste it into your page and make necessary changes. It works in Firefox, MSIE, Chrome, Opera and just about any new browser out there.
I'm having some trouble with using an iframe. So basically I was trying to create a slideshow, with one of the slides being an embedded video, so I did this by using an iframe. Well, the slideshow functions properly, and the video is resized properly, but when the image slides come up, they aren't being enlarged to the size of the iframe like the video is, and they seem to have a padding of 2 or 3px around the top/left sides. I've attached the HTML and CSS code, and took some pictures to illustrate what I'm trying to say and if anyone see's the problem, I'd really appreciate some help. Thanks so much!
CSS CODE
#imageDiv {
border: 5px solid black;
width:500px;
}
#slideshowImg {
width:500px;
height:300px;
margin:0px;
border-spacing:20px;
}
#mediaMenu table {
font-size:14px;
border:0;
margin-top:5px;
border-spacing:0;
}
table {
margin:0;
padding:0;
border-spacing:0
}
#mediaMenu td {
margin:0px;
padding:0px;
width:120px;
height:20px;
color:#CBE8E8;
}
.subMenu img {
width:100%;
height:100px;
}
.subTitle {
font-family:chalkboard, sans-serif;
background-color:#000;
font-size:12px;
}
.subTitle a {
color:#CBE8E8;
text-decoration:none;
}
HTML CODE
<!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" />
<title> ******* </title>
<link rel="stylesheet" type="text/css" href="" />
<script language="javascript" type="text/javascript">
slideshowImages = new Array(5);
slideshowImages[0] = new Image();
slideshowImages[0].src = 'images/tebowFinal.jpg';
slideshowImages[1] = new Image();
slideshowImages[1].src = 'images/nash.jpg';
slideshowImages[2] = new Image();
slideshowImages[2].src = 'images/kobe.jpg';
slideshowImages[3] = new Image();
slideshowImages[3].src = 'http://www.youtube.com/embed/9UlmwcEIWUw';
slideshowImages[4] = new Image();
slideshowImages[4].src = 'images/tbrown.jpg';
index=0;
function slideShow(source)
{
document.getElementById('slideshowImg').src = slideshowImages[source].src;
clearInterval(newPic);
index=source;
imageChange();
if (source=="3")
{
onclick=clearInterval(newPic);
}
}
function slideshowForward()
{
// increase the value of index by one or reset the value to 0 if all the slides have been cycled
index++;
if(index >= 5)
{
index=0;
}
// set the image name to the slide show image
document.getElementById('slideshowImg').src = slideshowImages[index].src;
}
function imageChange() {
newPic=setInterval(function(){slideshowForward() },5000);
}
</script>
<link href="slideshow.css" rel="stylesheet" type="text/css" />
</head>
<body onload="imageChange()">
<div id="imageDiv">
<table id="mediaMenu">
<tr>
<td id="imageRow" colspan="5" >
<a href="#" onclick="clearInterval(newPic)">
<iframe id="slideshowImg" src="images/tebowFinalFinal.jpg" frameborder="0" scrolling="no" ></iframe>
</a>
</td>
</tr>
<tr>
<td class="subMenu">
<a href="#" onclick="slideShow(0)">
<table>
<tr> <td class="subTitle"> Tebow Talks </td></tr>
<tr><td><img src="images/tebow.jpg" alt="Tim Tebow"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(1)">
<table>
<tr> <td class="subTitle">Nash attack </td></tr>
<tr><td><img src="images/nash.jpg" alt="Steve Nash"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(2)">
<table>
<tr> <td class="subTitle">Kobe Who? </td></tr>
<tr><td><img src="images/kobe.jpg" alt="Kobe Bryant"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(3)">
<table>
<tr> <td class="subTitle">Not So Giant </td></tr>
<tr><td><img src="images/giants.jpg" alt="San Francisco Giants"></img></td></tr>
</table>
</a>
</td>
<td class="subMenu">
<a href="#" onclick="slideShow(4)">
<table>
<tr> <td class="subTitle">Expensive mistake </td></tr>
<tr><td><img src="images/tbrown.jpg" alt="Terrell Brown"></img></td></tr>
</table>
</a>
</td>
</tr>
</table>
</div>
</body>
</html>
I am generating "Word document" with a header on the first page as HTML code. <style>
tag contains:
#page Section {
size:8.5in 11.0in;
margin: 0.7in 0.9in 0.7in 0.9in;
mso-header-margin: 0.0in;
mso-footer-margin: 0.0in;
mso-title-page: yes;
mso-first-header: fh1;
mso-paper-source: 0;
}
div.Section {
page: Section;
}
and <body>:
<div class="Section" style="font-family: Verdana, sans-serif;">
<![if supportFields]>
<div style="mso-element:header" id="fh1">
<p class="MsoHeader">
header
</p>
</div>
<![endif]>
</div>
It shows the "header" text both in header and in the document's main body. The resources (http://techsynapse.blogspot.com/2007/03/generating-word-document-dynamically.html and http://www.pbdr.com/ostips/wordfoot.htm) I have found say that there is no way of avoiding this effect without using an additional header file which is not an option for me.
And there goes my question: do you know any work-around for that problem? How can I hide the occurence of the header in main document but leave it in its place at the top of the page? Thanks in advance for any piece of advice.
This worked for me:
<html
xmlns:o='urn:schemas-microsoft-com:office:office'
xmlns:w='urn:schemas-microsoft-com:office:word'
xmlns='http://www.w3.org/TR/REC-html40'>
<head><title></title>
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Print</w:View>
<w:Zoom>90</w:Zoom>
</w:WordDocument>
</xml><![endif]-->
<style>
p.MsoFooter, li.MsoFooter, div.MsoFooter
{
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
tab-stops:center 3.0in right 6.0in;
font-size:12.0pt;
}
<style>
<!-- /* Style Definitions */
#page Section1
{
size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-title-page:yes;
mso-header: h1;
mso-footer: f1;
mso-first-header: fh1;
mso-first-footer: ff1;
mso-paper-source:0;
}
div.Section1
{
page:Section1;
}
table#hrdftrtbl
{
margin:0in 0in 0in 900in;
width:1px;
height:1px;
overflow:hidden;
}
-->
</style></head>
<body lang=EN-US style='tab-interval:.5in'>
<div class=Section1>
<p> CONTENT </p>
<br/>
<table id='hrdftrtbl' border='0' cellspacing='0' cellpadding='0'>
<tr><td>
<div style='mso-element:header' id=h1 >
<p class=MsoHeader ><p> HEADER-TITLE</p></p>
</div>
</td>
<td>
<div style='mso-element:footer' id=f1>
<p> FOOTER-TITLE</p>
<p class=MsoFooter>
<span style=mso-tab-count:2'></span>
Page <span style='mso-field-code: PAGE '><span style='mso-no-proof:yes'></span></span> of <span style='mso-field-code: NUMPAGES '></span>
</p>
</div>
<div style='mso-element:header' id=fh1>
<p class=MsoHeader><span lang=EN-US style='mso-ansi-language:EN-US'> FIRST-HEADER-TITLE<o:p></o:p></span></p>
</div>
<div style='mso-element:footer' id=ff1>
<p class=MsoFooter><span lang=EN-US style='mso-ansi-language:EN-US'> FIRST-FOOTER-TITLE<o:p></o:p></span></p>
</div>
</td></tr>
</table>
</body></html>
To update on above answer by vencedor and remove the extra empty character encoding added to your header/footer images/text you can do something like this:
<html
xmlns:o='urn:schemas-microsoft-com:office:office'
xmlns:w='urn:schemas-microsoft-com:office:word'
xmlns='http://www.w3.org/TR/REC-html40'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Print</w:View>
<w:Zoom>100</w:Zoom>
</w:WordDocument>
</xml><![endif]-->
<style>
<!-- /* Style Definitions */
p.MsoHeader, li.MsoHeader, div.MsoHeader{
margin:0in;
margin-top:.0001pt;
mso-pagination:widow-orphan;
tab-stops:center 3.0in right 6.0in;
}
p.MsoFooter, li.MsoFooter, div.MsoFooter{
margin:0in 0in 1in 0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
tab-stops:center 3.0in right 6.0in;
}
.footer {
font-size: 9pt;
}
#page Section1{
size:8.5in 11.0in;
margin:0.5in 0.5in 0.5in 0.5in;
mso-header-margin:0.5in;
mso-header:h1;
mso-footer:f1;
mso-footer-margin:0.5in;
mso-paper-source:0;
}
div.Section1{
page:Section1;
}
table#hrdftrtbl{
margin:0in 0in 0in 9in;
}
-->
</style>
<style type="text/css" media="screen,print">
body {
font-family: "Calibri", "Verdana","HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size:12pt;
}
pageBreak {
clear:all;
page-break-before:always;
mso-special-character:line-break;
}
</style>
</head>
<body style='tab-interval:.5in'>
<div class="Section1">
Something page 1
<div class="pageBreak"></div>
Something page 2
<div class="pageBreak"></div>
<table id='hrdftrtbl' border='1' cellspacing='0' cellpadding='0'>
<tr>
<td>
<div style='mso-element:header' id="h1" >
<p class="MsoHeader">
<table border="0" width="100%">
<tr>
<td>
YOUR_HEADER IMAGE/TEXT
</td>
</tr>
</table>
</p>
</div>
</td>
<td>
<div style='mso-element:footer' id="f1">
<p class="MsoFooter">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="footer">
YOUR_FOOTER_TEXT
<g:message code="offer.letter.page.label"/> <span style='mso-field-code: PAGE '></span> of <span style='mso-field-code: NUMPAGES '></span>
</td>
</tr>
</table>
</p>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
This now includes full css components for header and footer segments.
The trick that actually removes the extra encoding is declaring yet another table within the MsoFooter and MsoHeader sections.
You can hide extra space following this answer
Limiting table's height:
<table id='hrdftrtbl' border='1' cellspacing='0' cellpadding='0' style='margin-left:50in;'>
<tr style='height:1pt;mso-height-rule:exactly'>
<td>
<div style='mso-element:header' id="h1" dir="ltr" >
<p class="MsoHeader">
<table border="0" width="100%" style="margin-bottom: 15pt;">
<tr>
<td width="50%">
Some text goes here
</td>
<td width="50%" style="text-align: left">
<img height="auto" src="">
</td>
</tr>
</table>
</p>
</div>
</td>
<td>
<div style='mso-element:footer' id="f1">
<p class="MsoFooter">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="footer" dir="ltr">
<g:message code="offer.letter.page.label"/> <span style='mso-field-code: PAGE '></span> / <span style='mso-field-code: NUMPAGES '></span>
</td>
</tr>
</table>
</p>
</div>
</td>
</tr>
</table>