Good day to all.
I have this setup:
One page with text/whatever, that also includes an iframe (the page in iframe is created by me so I have access to it, I can modify its content).
What I need to do is that when I access a link from the iframe to open it on the mother page (navigate).
Until now I kind of failed to do that so any help would be appreciated.
For any further info just ask.
In all of the links that you want to affect the parent window do something like this:
GO THERE!
Or with javascript:
<a href="javascript:window.parent.location = 'somthing.html';" >GO SOMEWHERE!</a>
If all you need to do is change the parent window's location from inside the iframe, it is very simple:
window.parent.location = 'newWindow.html';
Or if you are using a link, just use it's "target" attribute.
You should use the target attribute <a href="" target="...">
For all the possible values of target, you can go here.
Related
is there any way how to access from iframe to parrent page (and change parrent page)?
<body>
<iframe src="frame1.html" name="frame1" height="100%"></iframe>
<div id="test1"></div>
</body>
In frame1.html is <a href=..> and I want to add text "<h1>clicked</h1>" into <div id="test1"></div>, when the <a href..> was clicked.
Thanks.
If your child page (frame1.html) is located at the same domain as the parent page, You can write a code like below in the child window :
$('#test1', parent.document).html('<h1>clicked</h1>');
The second parameter provides the context in which to search the element matched by the first parameter. The Document is here:http://api.jquery.com/jQuery/#jQuery-selector-context
jQuery( selector [, context ] )
So, your code (frame1.html) could go like this:
<a href="..."
onclick="$('#test1', parent.document).html('<h1>clicked</h1>');">click me</a>
Hope this helps.
Important note: Accessing in and out iframes is only possible, if both, parent and iframe are from the same domain, else you have no access due to Same Origin Policy.
Note, that both parts have their own document. Accessing the parent object from iframe is simple with
parent.document
and from parent it is one of the following:
window.frames['iframeName']
(window.frames.length /*gives you the number of iframes in your document*/ )
or reference it with id and do the following (watch out for support!)
var iframe = document.getElementById('iframe');
var doc = iframe.contentDocument? iframe.contentDocument:iframe.contentWindow.document;
The code below should work fine:
$(parent.document).find("#selector");
The selector is from the parent document to perform some action. For Example:
$(parent.document).find("#selector").remove();
I have an iframe. I want to access a table which present inside iframe.I want to access it from parent window of iframe. I have written JS like
Document.getElementById("table Id");
But the result come null. What is the process to get it?
thanks
x=document.getElementById("iFrameId");
x.contentDocument.getElementById("tableId");
if you can use jQuery i guess it will work across browsers
$("#iFrameId").contents().find("#tableId")
You have to select the element from the iFrame's document. Per Juan's comment, check against both the name, and id of the iFrame
var targetFrame = window.frames["nameOfIFrame"] || window.frames["iFrameId"];
targetFrame.document.getElementById("tableId");
EDIT
I just tested this with the following:
window.frames["fName"].document.getElementById("Adam").innerHTML
in the Chrome console, and it output the html of the Adam div from within my iframe.
What I would like to do is change the content of a div based on the different links clicked on the same page. Can anyone point me in the correct direction? AFAIK it could be dangerous to insert scripts directly into a page, changing text works okay but it seems I'm not sure about scripts. The content of the scripts are embed codes for video streaming. I realise this may not be the right way to go about it. My attempt won't work because of escaping the '<,>' characters and passing the parameter only seems to accept text with no spaces.
The way I've attempted it is as follows (in pseudocode);
function changeVideo(script){ div.innerhtml=script;}
then links that change the content of the div;
<a href='#' onclick=changeVideo('<iframe src=justin.tv etc..></iframe>')>
<a href='#' onclick=changeVideo('<iframe src=ustream.tv etc..></iframe>')>
You could drop the use of JavaScript and create an iFrame with a specified name to host the content; while giving the links a target tag. Thus making any links with the target tag specified appear within the named iFrame.
However if you insist upon using JavaScript you could consider the use of AJAX.
I suggest you to locate your a elements with unobstrusive Javascript, with getElementById() for example.
Once you have got them in variables like, lets say, a1 and a2, and the iFrame is in variable iframe do a code like this.
// ...a1 and a2 are anchors and iframe is the frame.
var srcSwitch = function(e)
{
e.preventDefault(); // this will prevent the anchor from redirecting you
iframe.src = this.src; // this changes the iFrame‘s source
};
a1.addEventListener('click', srcSwitch, 1);
a2.addEventListener('click', srcSwitch, 1); // and we register event listeners.
With this code, there is no need to insert Javascript within HTML attributes and you must only put the script URL in the anchors SRC attributes.
Tell me how it goes, greetings.
I may have generalised the question too much.
So I want to embed a stream on clicking a link. If the link is something like a proper URL
http://Jimey.tv/mystream
the iframe works, but loads the whole page. But I want to use the stream embed code to get just the player
The embed code looks similar to;
<script type = text/javascript> channel='mychannel' w='620' h='400'</script><script type=text/javascript> src="jimmy.tv/embed.js></script>
My original JavaScript method doesn't work because of escaping the < characters, and passing the embedcode seems to be problamatic. Hopefully I've made this a bit clearer?
<script>
iframe1 = '<iframe frameborder="0" scrolling="no" id="chat_embed" src="http://twitch.tv/chat/embed?channel=xenema&popout_chat=true" height="301" width="221"></iframe>'
</script>
link 1
link 2
<div id="videos">diiiiv</div>
I need to be able to open a link to a specific URL that is within an iFrame; the link is generated by php and I can't change the source code, so I need to change the link in the iFrame dynamically, if possible.
What I'm doing is this: on a non-profit organization's site, I have an affiliate store (generated by php) displayed within an iFrame on a page in order to make it more styled with the rest of the site. The php store pulls products from an affiliate service; the link to the store.php is in the same domain as the main non-profit's site.
The problem is the final "Buy Now" link from a product opens the final destination e-commerce store within the iFrame, and as such the page is stuck in the iFrame and looks bad and one must scroll V and H to see it and check out.
The link I need to open in a new window always has the class "av_buy_now" I have access to the CSS file, which I can change. I have access to the PHP files, i.e. shop.php, but it doesn't appear that the final link is generated locally. I'm showing the iframe this way:
<iframe src="http://nonprofit.org/shop/mj/shop.php"></iframe>
Is it possible to use jQuery or Javascript to find the links to mydomain.com with that one class and add a new window attribute to them? Or is there a better way? Thanks
Without some code I don't know the exact structure of your code, but I this could do the job. It requires jQuery to be in the iframe too.
$('iframe')[0].$('.av_buy_now').filter(function() {
return $(this).attr('href').indexOf('mydomain.com') > -1;
}).attr('target', '_blank');
You can change it if some how you can manage to execute this kind of code, changing class is little troublesome, of you got an id on it do something like this.
PAGE.html:
<button onclick="openinnewwin()">Get It</button>
<iframe src="test.html" id="ifrm"></iframe>
<script language="javascript">
function openinnewwin(){
ob=document.getElementById('ifrm');
if ( ob.contentDocument ) {
ob.contentDocument.getElementById('a').target="_blank";
}else if ( ob.contentWindow ){
ob.contentWindow.getElementById('a').target="_blank";
}
}
</script>
test.html:
Hello
my code is
<a href="#" target="_blank" class="floatLeft" onclick="change('http://localhost/allwidgets/widgets.html');" >
function change(url)
{
alert(url);
document.getElementById("mainOuter").innerHTML=url;
}
Actually I want that url should go in innerHTML of mainOuter div and that page should display in that.
Please suggest....
Thanks
It sounds like you may actually want an iframe:
<iframe id="someIframe"></iframe>
document.getElementById("someIframe").src = url;
If you want to actually modify a DIV's innerHTML, then you need to use a AJAX request to get the desired HTML, then use innerHTML. Libraries can make this easier.
You can't do like this. There are to possible ways to do this.
Method 1
You can use an iframe and load the page corresponding to the url by giving iframe's source as the url.
Method 2
You can use .load method of jQuery to load a page using the url. Something like
$('#mainOuter').load(url);