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.
Related
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'm calling a third party script tag inside a div. This third party js renders an iframe & puts their content inside the div I put this tag into. However I see the iframe but the head & body of iframe does not have anything in it, Seems js is not getting executed properly & hence I cannot see the content inside the div. I can just see the iframe being generated & appended to the div but cannot see any content inside it. This is how I have placed the third party tag.( PS Basically the third party script tag pulls the value of property "abc" of object1 & executes. )
html file:
< div id= "div2" style="display:none" >
< script >
var object1 = {
abc: "this is a fruit"
};
< /script>
<script type="text/javascript" src="thirdpartyjscode.js"></script>
< /div >
js file:
$('#div1').append($('#div2').show());
This code would show me div2 inside div1 but and the script inside div2 does get evealuated & I see iframe appended to div2 but I dont see any content inside it . Why would this happen? I don't get it. I read maybe using eval() would help but I'm not quite sure
This is what content looks like in the console after I do this & then I console logged "content"
var content = $('#div2').detach().html();
$('#div1').append('<div>', {
id: 'div2',
html: content
});
console.log(content) gives me the below .. But I dont see that iframe appended to the div2
<script type="text/javascript">
var object1 = {
abc: "this is a fruit"
};
</script>
<script type="text/javascript" src="thirdpartyjscode.js"></script><iframe id="abc_61086936097182" src="" width="610" height="100%" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" style="display: block; height: 871px;"></iframe>
Appending an existing DOM element to another element just moves the element in the DOM. Javascript is only executed when it's added to the DOM, not when it's just relocated within the DOM. If you want it to be executed, you need to make a copy:
var content = $('#div2').detach().html();
$('#div1').append('<div>', {
id: 'div2',
html: content
});
appending HTML into the DOM does not cause the browser to evaluate any script tags in said appended HTML.
eval($("#div2").find("script").text());
How to execute <script> code in a javascript append
In "first.html", I load a page inside div using Javascript.
<div id="content">
<div id="lot">Next</div>
</div>
<script>
function load_page()
{
document.getElementById("lot").innerHTML='<object type="text/html" data="next.html"></object>';
}
</script>
Both "first.html" and "next.html" have a div called "banner". I don't want to show "banner" in "next.html". So I add the following lines in "next.html".
<script>
document.getElementById('banner').style.display = "none";
</script>
The weird thing is the banner in "first.html" disappears but not the one in "next.html".
So one way I think to get away with it is if I could reference like this.
"first.html" --> "lot" --> "next.html" --> "banner"
Then try to make it disappear.
I also try this in "next.html", but not working.
<script>
document.getElementById('lot').getElementById('banner').style.display = "none";
</script>
Thanks for the hint.
Solution: When I use iframe, it seems to work. The banner in "next.html" is clearly recognized instead of mixing with the one in "first.html".
I think the simple solution is to use different ID's for the different banners. Something like
id="innerBanner" and id="outerBanner"
Iframe syntax:
<iframe src="URL" width="xxx" height="xxx"></iframe>
I think your problem comes from the folowing line :
document.getElementById("lot").innerHTML='<object type="text/html" data="next.html"> </object>'\
Mabye you can do the same thing with a simple hyperlink:
Next
Than there is no chance, after you write the style in next.html, that it will change something in the previous page's html
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 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