We have 1 IFRAME present in asp page. And 1 HTML page where we have redirected to the parent IFRAME on click of anchor tag using angular.js.
In HTML page we have code as given below present inside anchor tag,
ng-click="seeDetail(); "> Go to parent Iframe
In javascript function seeDetail() we have code as shown below,
var url = "./PageToBeLoaded.asp";
parent.document.getElementsByTagName("IFRAME").item("frameID").src = url;
On call of this statement in javascript we need the URL to launch in parent IFRAME.However instead of loading in the parent IFRAME its loading in the HTML page itself.
Yes it is. You're looking in the parent, finding the iframe, and setting the src of it, which is probably the current iframe. I think what you're looking for is parent.location.assign(url).
We used ng-href tag with target attribute and it worked fine. Provided the URL to the ng-href and the frame name to the target attribute.
Related
I'm trying to do the following. Say I have html file and it contains blank iframe within it
<iframe id="preview"></iframe>
Now I need to write a script to update content of that iframe
var preview=document.getElementById("preview");
preview.src = 'data:text/html;charset=utf-8,' + HTML_CODE_HERE;
Problem occurs when that code contains external CSS or javascript files, they just appear to not parse / execute.
How can I make iframe reload and re-run HTML parser for it's content?
Two things.
1.Why is the src of your iframe, an entire HTML page?Shouldn't you be creating an HTML page, say page1.html, and referring to that in your src?
2.You might be facing problems with external paths and CSS because the path that is given when the iframe is displayed.
3.For reloading an iframe, check this StackOverflow link.
<iframe id ="iframeA" name="iframeA" src="./friendList.html" frameborder="0" width="100%" height="100%"></iframe>
I have an iframe tag like this.. and When the parent frame is loaded I add some tags in this iframe body. However when I change iframe src to './letterList.html' using jquery then letterList.html will be loaded correctly and then when I click back button, iframe src is not change to original './friendList.html'(even the focus was in the iframe) , But the content in iframe was './friendList.html' 's content. only src was not changed. and of course the tags that I added in iframe body was gone. I understand that tags were gone, but I can't understand why src is not changed but the contents in iframe is the original iframes'content.
Anybody can help me?.....
Not sure how you mean 'why'. This is not error, this is specified behaviour (look at the note right before name attribute description). This was probably done because iframes sometimes should be unable to interact with parent document at all.
However, if you want to handle that, you might for example catch onbeforeunload event in iframe and reset its src.
I have a HTML page with the following structure:
index.html has a menu at the top, where if the user clicks stuff its loaded into an iframe at the bottom (the iframe auto resizes with JS if the content is loaded.)
Now I want to place a "go to the top" link in some of the pages, that are in the iframe, but since the anchor is in index.html it does not work, e.g:
index.html:
<body>
<a name="topOfThePage"></a>
...
<iframe ...
in the subpages, that get loaded into the iframe in index.html:
<a href="#topOfThePage" >go to the top</a>
This does not seem to work, anyone knows how to do this? (without JS if possible)
Try adding target="_parent" to the anchor.
Edit: This will target the parent frame, but it will use the location of the iframe's page, so the href actually needs to be e.g. index.html#topOfThePage if the iframe containing page is index.html. Obviously this will only work if the iframe content page is always going to be contained used in the same containing page - let me know if that's not the case, I'll think of something else.
I have a simple html page. It has a iframe to some other site. I want to change the color of anchor tag that is nesteed in that Iframe. is is possible to access Elements of Iframe via javascript
If the other page is in another domain, due to cross-domain security, it will not be possible to edit HTML content of an iframe from the main page.
There are workaround for this, such as writing the change you want to make in the url. But this is really dirty.
If it is in the same domain, i suggest using, as example:
$('div', $('iframe')[0].contentWindow.document)
for getting all div elements inside your iframe
I did it by using following code
function loadFrame(){
document.getElementById('pcl_frame').contentWindow.document.getElementsByTagName('a')[0].style.color='blue';
}
You need JavaScript. It is the same as doing it in the parent page, except you must prefix your JavaScript command with the name of the iframe.
Remember, the same origin policy applies, so you can only do this to iframe is coming from your own server.
frame1.$('mydiv').style.border='1px solid #000000'
or
frame1.$('mydiv').addClassName('withborder')
You can get the values of the elemets inside the iframe using
$('#iframeId').contents().find('#id-of-element-inside-iframe');
But the values cannot be altered.
There is just one simple solution, which will only work when you own the content in the iframe.
In your parent source add:
<script type="text/javascript">
var innerDocument = null;
</script>
In your iframe add:
<script type="text/javascript">
parent.innerDocument = document;
</script>
When the iframe is loaded you can now target the iframe's document by using innerDocument.
This circumvents the cross-domain security.
I have included JQuery on my main page which is a html page, in the main page there is an iFrame and in the iFrame I am calling another HTML page. I want to use jquery in the html page which is being called in the iFrame, is it possible to use the JQuery which is included in the main page? if it is then please let me know how?
Are the pages in the same domain? (Same origin policy.)
If so then from the iframe do parent.$(xxx) but be aware the jquery will be manipulating the top level document! Not the iframe!
If you want to manipulate the iframe do $(xxxx, $('iframe').contents()) - i.e. you set the context to the iframe, then use jQuery like usual. You would probably want to set $('iframe').contents() to a variable - and if you have more than one iframe give them an ID so jquery can find the right one.