How to capture an all event from a iframe to other iframe - javascript

I want to capture all event from an iframe and what ever event happen to an ifram i want to execute the same event to the other iframe how can i achieve this , please show me the way .
Here is my iframes.
<table border="1" width="100%" height="100%">
<tr>
<th><iframe width="100%" height="100%"src="http://google.com"></iframe></th>
<th><iframe width="100%" height="100%"src="http://google.com"></iframe></th>
</tr>
</table>

You can't do this because the Same Origin Policy will deny you all access to external iframes.

Related

Can't Change Select Item in Table with Selenium Python

I'm working with a really outdated site that's giving me issues. What I'm trying to do is select the "Judgement/Lien Search" tab as seen on: page
The issue is that there are no identifiers. No name, ID, etc.
<table border="0" bgcolor="#ededed" cellpadding="8" cellspacing="0">
<tbody>
<tr>
<td width="33%" bgcolor="#ededed" nowrap=""><b><font size="+1"><u>Case Search</u></font></b></td>
<td width="33%" bgcolor="#cccccc" nowrap=""><b><font size="+1">Judgment/Lien Search</font></b></td>
<td width="33%" bgcolor="#cccccc" nowrap=""><font size="+1"><b>Property/Lis Pendens Search</b></font></td>
</tr>
</tbody>
I've tried using xpath, css selector, and even just executing the script. I've been using ChroPath to get the correct info. When <b><font size="+1">Judgment/Lien Search</font></b> is selected ChroPath gives me these options:
Rel XPath: //td[2]//a[1]
Abs Xpath: /html[1]/body[1]/table[1]/tbody[1]/tr[1]/td[2]/a[1]
CSS Selector: table:nth-child(5) tbody:nth-child(1) tr:nth-child(1) td:nth-child(2) > a:nth-child(1)
None of which have actually worked when using driver.find options
When I try to just execute the javascript driver.execute_script("javascript:submitJudgementSearch();") I get error: "selenium.common.exceptions.JavascriptException: Message: javascript error: submitJudgementSearch is not defined".
Any ideas on other ways to select it? Or am I looking at something wrong? This bump in the road really has me stumped. Thanks!
What about using Attribute Starts With Selector ?
Since your anchors seems to have unique href values this could work as a selector for the anchor itself. From there you could move up the dom to the parent if the <td> is indeed what you need.
$('a[href^="http://example.com/external/link"]').click(function() {});
You could use document.querySelector to get the job done potentially, refer to the snippet below. I was able to select that element using document.querySelector
document.querySelector('td a b').style.color = "red";
<table border="0" bgcolor="#ededed" cellpadding="8" cellspacing="0">
<tbody>
<tr>
<td width="33%" bgcolor="#ededed" nowrap=""><b><font size="+1"><u>Case Search</u></font></b></td>
<td width="33%" bgcolor="#cccccc" nowrap=""><b><font size="+1">Judgment/Lien Search</font></b></td>
<td width="33%" bgcolor="#cccccc" nowrap="">
<a href="javascript:submitPropertySearch();" target="_self">
<font size="+1"><b>Property/Lis Pendens Search</b></font>
</a>
</td>
</tr>
</tbody>
Theres another example here
And the Mozilla docs

Block loading of an iframe while not visible asp.net

I have a page in a website that has tabs at the top. Each tab when clicked shows a different section. Each section has multiple iframes.
My problem is that when the page with the tabs on it is loaded, it loads slow because it loads all the iframes in all the tabs at once.
I am looking for a way to only load the visible iframes. Is there a way to block the loading of an iframe, such as settings its source when the tab is clicked or an even simpler way to just have it load when visible = true?
Searching the blogs and websites, all i find is why its bad to use iframes and alternatives to iframes. In my case, using iframes is very practical.
Here is an example of one of the tabs HTML, which is inside a div tag:
<div class="single" id="Company_Options">
<fieldset style="margin-top:-10px; border: 1.5px solid #00659c; height:auto;">
<legend style="color:#00659c;font-weight:bold;font-size:20px;" id="Company_Title" runat="server"></legend>
<table style="width:100%; margin-top:-10px; margin-bottom:-30px;">
<tr>
<td style="width:50%;">
<fieldset>
<legend style="color:#00659c;font-weight:bold;font-size:15px;" id="Company_Country_Title" runat="server"></legend>
<iframe id="iframeCountryList" frameborder="0" scrolling="auto" width="100%" height="100%" src="CountriesList.aspx" style=""></iframe>
</fieldset>
</td>
<td style="width:50%;">
<fieldset>
<legend style="color:#00659c;font-weight:bold;font-size:15px;" id="Company_Currencies_Title" runat="server"></legend>
<iframe id="iframeCurrencyList" frameborder="0" scrolling="auto" width="100%" height="100%" src="CurrenciesList.aspx" style=""></iframe>
</fieldset>
</td>
</tr>
<tr>
<td style="width:50%;">
<fieldset>
<legend style="color:#00659c;font-weight:bold;font-size:15px;" id="Company_Departments_Title" runat="server"></legend>
<iframe id="iframeDepartmentList" frameborder="0" scrolling="auto" width="100%" height="100%" src="DepartmentList.aspx" style=""></iframe>
</fieldset>
</td>
<td style="width:50%;">
<fieldset>
<legend style="color:#00659c;font-weight:bold;font-size:15px;" id="Company_Divisions_Title" runat="server"></legend>
<iframe id="iframeDivisionList" frameborder="0" scrolling="auto" width="100%" height="100%" src="DivisionList.aspx" style=""></iframe>
</fieldset>
</td>
</tr>
</table>
</fieldset>
</div>
When the tab is set like this:
Company_Options.Visible = false;
The content of the iframe still loads.
I need something like this pseudo code:
iframeCountryList.Render = false;
iframeCurrencyList.Render = false;
iframeDivisionList.Render = false;
iframeDepartmentList.Render = false;
Company_Options.Visible = false;
Any ideas on how i can block the rendering of an iframe, whether it be in c# in the code behind or on client side javascript? Thanks!
You can create a control for it. Fill attribute like data-src instead of src on initialization. src can be copied from data-src when you need to load iframe content.

Iframe inside modal not scrolled to the top when opened

I have an iframe inside a modal but when I open the model the iframe in it is not showing the beginning of the page but the middle.
<iframe name="finance" id="finance" src="https://www.elbtools.com/secure/apply.php?elbt=1459262273170" frameborder="0" border="0" cellspacing="0" style="width:100%; height: 700px;"></iframe>
This is my codepen. Thanks.
A quick solution (edited codepen) is to append "#" at the end of your iframe src.
src="https://www.elbtools.com/secure/apply.php?elbt=1459262273170#"
Hope you can modify it until you find better solution.

html <object data> using a non link to navigate to a page I click on from a page with multiple pages

Right now I have 4 search pages being pulled into one page using a table and the object tag. If I click on a link anywhere with anyone of the search pages I can go to that link.
How can I go to that systems home page by clicking in an area without a link? For instance I can click on anything at Google.com and even insert my cursor into the search area, but I would like to click it so it is the only page on the screen too.
I don't want to lose the functionality of being able to click on links when multiple webpages are up..
<table style="width:100%">
<tr>
<td style="height:800px">
<object data='http://google.com' width='100%' height='100%'>
</object>
</td>
<td style="height:800px">
<object data='http://bing.com' width=100% height='100%'>
<pr>Browser won't retrieve the forecast</pr>
</object>
</td>
</tr>
<tr>
<td style="height:800px">
<object data='http://lycos.com' width=100% height='100%'>
</object>
</td>
<td style="height:800px">
<object data='http://ask.com' width=100% height='100%'>
</object>
</td>
</tr>
</table>
Why is it needed to use object tag? You can store your url in a data attribute by using simply a div and you can add a simple click eventhandler to it. When you click on it just get the stored url from the data and give it to the window.location.

Get the height of a whole page in pixel

For some decoration, I need to insert an upper margin at the beginning of the document which represent 34% of the whole height of the page (margin included).
My page < body> start like this:
<body bgcolor="#dedede" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="-webkit-text-size-adjust:none;">
<tbody>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#dedede">
<tr>
<td>
<table class="premier-tableau" width="600" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" align="center">
<thead>
<tr height="500" /> <!-- I need to use this line as a margin -->
</thead>
<tbody>
<tr>
<td width="35" />
<td width="530">
<font color="#5e5e5e" face="Arial, Helvetica, sans-serif" size="2" style="font-size: 12px;">
This is for using in e-mails.
Of course it is possible to calculate manually the number of pixel, and add the static result to the < tr> tag. But, It is part of a semi-automated process, and I would like to avoid that.
Also note that the destination SMTP server may have a strict policy and refuse attachments. So, I don't see how to use externals libraries (such as JQuery). As a modern ecmascript is available, I would like to avoid using them...
Any embeddable solutions (css;javascript;svg ...) are accepted.
document.body.parentNode.offsetHeight but - javascript isn't going to run in emails :) I therefore think that you need to do this manually.
since you have no margins on the body, a simple height should do it.
document.getElementsByTagName("body")[0].height
There is the viewports Units which have been designed for that. Few browser support it actually, but using height="34vh" will be the right way to proceed in some years.
It will take some years for clients to comply with the standard. An actual way to proceed now, is to compute the size (in px) manually each time the document is edited.

Categories

Resources