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
Related
Im trying around with HTML and found the -tag.
I provided an url as src and the website does load without problems.
However I canot get the HTML-Code of this inner website. How can I access it with JS?
I already tried innerHTML, children, childNodes etc.
HTML
<div class="Webframe">
<embed id="webframe" src="http://testapp.galenframework.com/"></embed>
</div>
Console output of
let webframe = document.getElementById("webframe");
console.log(webframe)
can be seen here
https://imgur.com/JH2jzKr
If anyone has an idea how to access this #document, I would be happy to try it out
Thank you in advance
Your first problem is the lack of interface to do your task with <embed>. Better to use <iframe>.
The second is to try to access content from another domain without CORS. (See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)
Lets try a local page in a <iframe>. Now you can access the iframescontentDocument`:
<iframe id="webframe" src="test2.html"></iframe>
<script>
let webframe = document.getElementById("webframe");
webframe.onload = ()=> console.log(webframe.contentDocument.body.outerHTML);
</script>
If you have access to another domain server, you can add "Access-Control-Allow-Origin: *" to the HTTP header and try it.
<div class="Webframe">
<embed id="webframe" src="http://testapp.galenframework.com/" />
</div>
let webframe = document.getElementById("webframe");
console.log(webframe)
Is there a way to embed a class from another page in my site?
Lets say I have this code in the page "index.html"
<div class="cls1">
content of div...
</div>
and I want to embed it to another page "anotherpage.html" in my site.
So I do:
<iframe src"?"></iframe>
What should i put instead the ?
note
I want to take from the first file only a divs with the same class
You can separate your html to two files, and then add iframe to another file.
First file:
<div class="something">
Tralala
</div>
Second File:
<iframe src="/path/to/your/first/file.html">
</iframe>
iframe requires src (source) parameter, which should be a valid URL where html file lays. However you can use javascript to assume this type of behaviour.
Using jquery for example:
$('.div2').html($('.div1').html());
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 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>
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.