Ok this is in javascript, so I have a iframe inside a contente place holder of a master page.
Something like this.
1-MasterPage
2-contentePlaceHolder
3-Iframe
When i'am in the iframe how do I get a control with "GetElementById" from the masterPage??
Unfortunately, you cannot. Your iFrame is unaware of the master page holding it.
If both your parent page and iframe src are on the same domain then using JQuery you can do something like this from the iframe's src page:
$(parent.document).find('#myElement').hide('slow');
Try this :
Provided that masterpage and iframe src belong to same domain , let's say you have a button in iframe , on 'onclick' event of that button write this code :
var P = parent.document.getElementById("element_id") ;
Related
Hi I have multiple pages that reside in an iframe and I would like them to open in the parent page when say a search engine indexes them or people directly link to them.
Example:
-this page will be the parent page and have an iframe
-this will be first page.php
-then there will be second page.php, third page.php, fourth page.php, ect.
I would like it if someone linked to any of the pages that require the iframe to load the parent page with the iframe and load the url into that iframe. So if someone links to say third page it will load the parent page and load third page in the iframe.
I have tried the following scripts that I have found from posts across the web but they only load the parent page with the original src in the frame.
<SCRIPT LANGUAGE='javascript'>
try {
if (top == self) {
top.location.href = 'parent page.php';
}
} catch(er) { }
</SCRIPT>
And
<script type="text/javascript">
if (window == top) {
var url = 'window.location.replace("parent page.php?var1=' + window.location.href + '")';
eval(url);
}
</script>
I also tried:
<body onload="refreshFrame();">
Then I saw the post on Open iframe page in parent frame (javascript) here and it just brings up the page that was linked to and not the iframe.
The pages in the iframe are dymanically created as well so idk if that has anything to do with it or not.
But nothing seems to open the page inside of the iframe on my site it only loads the parent page with the original src first page in it. So idk if this is possible with either javascript or php.
Also idk if anyone knows how this practice effects seo there are not many words and no tags on the parent page so I was just curious about that too.
Thanks
Did you try use the base tag in you iframe pages? Something like:
<base target="_parent" />
UPDATE
OK, so in your scenario you need to know if the current page is loaded on brownser or via iframe. And if it's not on iframe, redirect to your another page where you calling the iframe.
First thing first, check if the current page is inside a iframe with js:
<script type="text/javascript">
if ( self === top ) {
//Its not an Iframe;
}
</script>
Now that we know if the page isn't load via iframe we can use a redirect inside that if statament:
window.top.location="http://www.yourdomain.com";
Now you need to make sure after redirect the page, the iframe src attribute will be the same url it was before. I'm assuming you can do that with a get parameter int the url? Let me know if find trouble in that part.
UPDATE2
Just add a get parameter in the url as i mentioned above. Something like this:
<script type="text/javascript">
if ( self === top ) {
//Its not an Iframe, needs redirect:
var url = window.location;
window.location="http://www.yourdomain.com/index.php?iframe="+url;
}
</script>
Now in your index.php ( or whatever is the page that contain the iframe):
<?php
$iframe_url = (isset($_GET['iframe']) && !empty($_GET['iframe'])) ? $_GET['iframe'] : "initial-url-content";
?>
<iframe src="<?=$iframe_url?>"></iframe>
I need the following:
I got a html document, in which I have an iframe and an object. Both, the iframe and the object contain separat html files.
Now I want to click a link in the iframe, and this should affect the links inside the object to hide.
How do I use jQuery selectors to select the links in the object html file?
Structure:
<html file parent>
<iframe> html site 1 with link to click</iframe>
<object> html site 2 with links to affect </object>
<html file parent>
Thanks in advance!
This is not possible if the domain of the iframe is different from that of your .
This is a javascript restriction.
For this to possible you need to have control on the url loaded in the iframe.
If it is of same domain then you can probably do that.
If you have control over the iframe's url try this.
First, have a look at window.postMessage. Using this, you may send an event from your iframe to the window parent target. Listening for that event in the window parent (when something in your iframe changed), you will then be able to access any element inside the object tag using a syntax like this:
$('object').contents().find('linkSelector')
Give your iframe an id, let's say myIframe:
<iframe id="myIframe"> html site 1 with link to click</iframe>
Get a reference to the iframe:
var myIframe = document.getElementById('myIframe');
Post a message from iframe:
myIframe.contentWindow.postMessage('iframe.clicked', 'http://your-domain.here.com');
Handler for iframe change:
var handleIframeChange = function(e) {
//
if(e.origin == 'http://your-domain.here.com') {
// Get reference to your `object` tag
var objContent = $('object').contents();
// For instance, let's hide an element with a class of `link-class-here`
objContent.find('.link-class-here').hide();
}
}
Listen on parent window for the event sent by the iframe:
window.addEventListener('iframe.clicked', handleIframeChange, false);
Haven't tested it right now (did this in the past, when I had control over iframe) but it should work, but as I said, only if you can have control over the iframe.
I want to get an element from an iFrame and click it. Getting the element succeeded. Unfortunately i cant get the element within the iframe clicked. Anyone with a solution?
Thanks!
$(document).ready(function(){
var frame = $('#f314dbebb8'); //ID from the frame
console.log(frame);
});
Is this what you are trying with
document.getElementById('iframeResult').contentWindow.document.getElementById('buttonId').click()
where iframeResult is Id of iframe and buttonId is Id of element to be clicked ??
Do you mean you are trying to "click it" programmaticly, like via JavaScript? Or a user interaction like with your mouse and cant?
If you are trying via JavaScript its not going to work. Look up something called "same origin security". JavaScript cannot access other pages load via an iframe for security purposes. http://javascript.info/tutorial/same-origin-security-policy
Have you tried document.getElementById('elementid').click();?
I'm trying to append the url of the parent page an iframe is located in based on the current url within the iframe.
This is all taking place on the same domain, so I don't think there should be any security issues.
EDIT:
My code now looks like the following:
function locator_url() {
var iframeUrl = alert(document.getElementById("dealer- locator").documentWindow.location.href);
var iframeUrlSplit = iframeUrl.split('/locator/');
window.location.hash = '#' + iframeUrlSplit[1];
};
$(document).ready(function(){
document.getElementById("dealer-locator").contentWindow.onload = locator_url();
});
Now the default src for the iframe is http://localhost/meade/locator/
The page the iframe is on is http://localhost/meade/dealerlocator/
The code works for the initial page load, the parent url is appended to localhost/meade/dealerlocator/#
However, when I click a link inside the iframe the parent url doesn't change, even though the href value in the iframe has.
The parent url should have it's hash updated to something like:
localhost/meade/dealerlocator/#results_list.php?showonly=US&tab=US&zip=&distance=10&state=&city=&name=
But that's not happening.
What am I missing?
Did you try:
document.getElementById("dealer-locator").contentWindow.onload = locator_url;
Well, if you need click events in your iframe, then you could do it this way:
Car.com
Then locator_url() gets called in the parent page. Same goes for using load events (I mean, load events that occur in the iframe context).
According to this answer:
Invoking JavaScript code in an iframe from the parent page
I have an iframe that loads a page that has a div with the id flash_container
<iframe src="http://www.remote.com/a.html" id="iframeID">
I placed this code on my parent page (the page that loads the iframe) but it doesn't seem to work:
document.getElementById('iframeID').contentWindow.targetFunction();
function targetFunction() {
var el = document.getElementById('flash_container');
el.style.zoom = 0.7;
el.style.MozTransform = 'scale(0.7)';
el.style.WebkitTransform = 'scale(0.7)';
}
What I'm trying to do is to zoom-out the inner page inside the iframe from the parent page.
It's impossible to say for certain what's wrong, but I have some ideas you might want to look into.
Make sure that the iframe is loaded. Trying to do something inside a frame that hasn't finished loading clearly won't work
Are you sure that you don't have cross-domain problems. You cannot manipulate the contents of a cross-domain iframe.
Actually you could, if both side (your page and the page in the iframe) agree on sharing information, you could use message passsing. See https://stackoverflow.com/a/7938270/1571709