I have a webpage that has several <div> sections ("navcol" and "maincol"). The "navcol" div contains <object data="mypage.html">. Inside mypage.html there are buttons the user can click to select pages to be inserted into "maincol". I need to gain access to the innerHTML of "maincol" in the main page with Javascript, so I can do the insertion (like using an iframe). Can someone put me on the right track?
PS. I am using <object>, because I want to have HTML 4.0 "Strict" and Iframes are not in "Strict", but s are.
From within the page in the object element, you can get access to the upper–most browsing context using:
window.top.document
so you can try:
window.top.document.getElementById('maincol');
no doubt only within limitations imposed by the same–origin policy though.
e.g.
<div id="mailcol">maincol</div>
<div id="navcol">
<object data="foo.html"></object>
</div>
in foo.html:
<button onclick="
alert(window.top.document.getElementById('mailcol').innerHTML)
">button</button>
Related
I have an input type=text where my user will type his own HTML template.
I have a button that opens a modal which shows the formatted html as a "preview html template".
Whenever the user Clicks on my preview_button, it opens a modal that shows the html the user typed before. This is part of the modal, this is how I'm inserting the html:
<div class="flexBox mg-2">
<span [innerHTML]="my.element.text"></span>
</div>
Although it is working and showing the text correctly. It doesn't allow me to use style formatting. So If my user write this on the text_input
<h1 style="color:red;">Hello World</h1>
When the modal opens, I can see the text but not the color styling.
I found a few topics here suggesting to use this.sanitizer.bypassSecurityTrustHtml, but I also read its kind of dangerous and also it messes all my pages style up, so I can't use it.
And a few examples showing how to do this with a static html(on class constructor).
Edit
Tried to use iframe.
It works like this(inline css):
<iframe srcdoc="'<h1 style='color:red;'>Hello World</h1>'"></iframe>
Also works like this(style tag):
<iframe srcdoc="<h1 id='pp'>Hello World</h1><style>#pp{color:red;}</style>"></iframe>
BUT when I try to use interpolation it no longer applies the style. (due to the Angular Policy)
<iframe [srcdoc]="components.body.text"></iframe>
Any good/correct/safe way to do it when the html is dynamic?
Can't click on the anchor inside a frame with href value as javascript using selenium.
#Note: I could manually click/ call the javascript from IE developer console all looks good. The issue is only through selenium .
Here is the page source like
<html>
<body>
<p>
<iframe name="iframe1" width="100" height="218" src="about:blank" frameborder="0" marginwidth="0" "marginheight="0" scrolling="yes">
<html>
<body>
<div class="className" id="DivName"onmouseover="startLinkHover(0,70)" onmouseout="stopLinkHover()">
<a name="link0" href="javascript:function()" shape=""> This is link 1 </a>
</div>
</body>
</html>
</iframe>
</p>
</body>
</html>
I am working with c# ,IE and selenium
Selenium.WebDriver.IEDriver" version="2.53.1.1"
Selenium.WebDriver" version="3.0.0"
Selenium.Support" version="3.0.0"
IE 11 ( As my web application only support IE)
Here is what i have tried:
As it the page is consisting of iframe
1) I am switching to iframe and find the anchor using the name and click
driver.SwitchTo().Frame(driver.FindElement(By.Name("iframe1"));
driver.FindElement(By.XPath("//a[#name='link0']")).click();
2) I have also tried to extract the href property into a string variable and tried to execute the javascript using Javascript executor.
driver.SwitchTo().Frame(driver.FindElement(By.Name("iframe1"));
var js=driver.FindElement(By.XPath("//a[#name='link0']")).GetAttribute("href");
var jsDriver = (IJavaScriptExecutor)driver;
jsDriver.ExecuteScript(js);
Please excuse if any typos as i don't want to post the html source here i have explained my issue with a sample.
Thank you
Finally i managed to resolve this issue by reloading the project from source control after pointing the .net framework target version to 4.5 instead of 4.52 (not sure why would this be?).
after investigations , it was proved that issue was not with selenium clicking on the element but the execution of java script after that with page loads.
I have some img tags inside iFrame(id=iframe1) on my page.
Some of them has src attribute set to myimg.jpg, 'myimg_small.jpg', myimg_large.jpg etc.
I am trying to find everything inside #iframe1 with src like myimg, so I wrote
images = $('#iframe1').contents().find('[src*="myimg"]')
but I am getting error as below
Uncaught Error: Syntax error, unrecognized expression:
[src*="myimg"])
at Function.Sizzle.error (jquery-1.8.2.js:4679)
at tokenize (jquery-1.8.2.js:4739)
at select (jquery-1.8.2.js:5099)
at select (jquery-1.8.2.js:5276)
at Function.Sizzle [as find] (jquery-1.8.2.js:3941)
at init.find (jquery-1.8.2.js:5372)
at <anonymous>:1:36
What's wrong here?
Update
alert($('#if').contents().find('[src*="ss"]').next().html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id='if'>
<img src='sss.jpg' />
<div>
scdscd
</div>
</iframe>
Simply do:
var x = $("img[src$='myimg.jpg']");
alert(x.attr("src"));
Use contains selector, and as Enfyve mentioned in comments remove extra ).
images = $('#iframe1').contents().find('[src~="myimg"]')
You are wrong about using an iframe.
The iframe must use the src attribute and use it to load the contents of other pages. An iframe does not need to include its child elements directly in its tag.
You can try this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id='if' src="1.html">
</iframe>
//1.html
...
<img src='sss.jpg' />
<div>
scdscd
</div>
and you can try as following.
alert($('#iframe1').contents().find('[src*="ss"]').next().html());
Selector is correctly working. You can see working jsbin here.
Incorrect usage of iframe is causing issue for you.
If you want add contents to iframe either you have to specify URL using src attribute or HTML string using srcdoc attribute.
The srcdoc attribute specifies the HTML content of the page to show in the inline frame.
Reference iframe srdoc
make sure that your iframe src is targeting the same domain as your main page. Otherwise you are not allowed to access iframe content. This is called XSS (Cross Site Scripting) and it's prevented by major browsers.
If your iframe source is on the same domain and you still can't access it's content make sure to set a setTimeout waiting for iframe content to be loaded because iframe content start loading after the main page is loaded.
I have two applications one is already built and the other one is my own I can't do any modification in the first one and it uses iframes and in that frame I can put my application but I will need the name of the connected users which the only option is to get it from the source code using javascript the problem is that user name inside a css class not id
if you have any ideas how can I get it please help thanks to you all
<div class="Entete_User">
<div class="Entete_UserName">USER NAME <br> USER CITY</div>
</div>
<div class="body">
<iframe id="myiframe" frameborder="0" allowTransparency="allowTransparency" src="MYPAGE.aspx"></iframe>
</div>
</form>
To get the content of the element in the parent window from inside the iFrame :
window.parent.document.getElementsByClassName('Entete_UserName')[0].innerHTML;
Try this but make sure Iframe and your origin page in same domain as iframe does not support cross domain
JavaScript
window.parent.document.getElementById('parentElement')[0].innerHTML;;
Jquery
$('#parentElement', window.parent.document);
this is for outside the iframe trying to see whats inside..
document.getElementById("myiframe").contentWindow.document.getElementById()
but you have to be on the same domain
I have one parent window and two iframes in it. I am trying to access elements of one iframe from
another iframe.Using the code:
function startplay(){
var txt="";
txt+= "some text";
var tag = window.frames("plays").getElementById("myvideo");
tag.innerHTML=txt;
}
the above code lies in an iframe script which is activated by anchor tag. but nothing happens on calling the script. myvideo tag content doesn't change. is it the correct way to access the elements of one iframe from another.
should i use parent.document.getElementById("plays").getElementById("myvideo"); to get a ref. of myvideo.
code lies in iframe(playright) and myvideo tag lies in iframe(plays).
if you are within one of the iframes, you need to use "parent" to go to its parent, and from there reference the iframe object.
So this should work:
parent.nameofotheriframe.getElementById("myvideo");
(by using getElementById you were referencing the <IFRAME> tag, not the iframe object).
I had the same problem and solved it like this:
My main page code:
<div id="left">
<iframe id="leftframe" name="leftframe" src="iframe-left.html"></iframe>
</div>
<div id="right">
<iframe id="rightframe" name="rightframe" src="iframe-right.html"></iframe>
</div>
Left frame:
<div id="DivInLeftFrame">aaa</div>
Right frame:
<input type="button" value="clickme" onclick="changeLeftFrame();">
The function is:
changeLeftFrame(){
parent.leftframe.document.getElementById('DivInLeftFrame').innerHTML = 'bbb';
}
add the 'document' to work.