I have an Iframe inside a webpage that contains a child Iframe . I want to change child iframe width using jquery .
Note that inner iframe doesnt have id.
how can i do that ?
(both iframes are from my domain)
Thankyou very much
<Iframe id="iframeDoc ">
// some codes
<Iframe>
// another page codes
</Iframe>
</Iframe>
I have tried these codes but no one did work!
$('#iframeDoc > iframe').width("400px");
$('#iframeDoc iframe').width("400px");
$('#iframeDoc').contents().find("iframe").width("400px");
You could use contentWindow to select the nested iframe:
let pageiFrame = document.getElementById('iframeDoc')
let nestediFrame = pageiFrame.contentWindow.document.getElementBySelector('iframe')
pageiFrame.style.width = '400px'
nestediFrame.style.width = '400px'
If your iframe lies on a different domain - this can be useful.
Try to look into Window.postMessage() method. You can use it inside your iframe and window.addEventListener('message', messageHandlerFn)outside.
But it suitable only in case when you have possibility to modify sources outside iframe.
Related
As you can see if you run the code snippet.
You will see "openstreetmap" hyperlink.
If you click it. you will open a new document with a different URL path at the browser level.
I want to get this new "URL" / "path" / document inside the iframe tag.
I have been trying to find a solution in many places.
but it seems like an impossible mission!
can some brave guy, help me to do some magic in js / jquery.
I was trying with sandbox attribute to prevent top navigation.
but it feels like nothing is working.
Thanks!
<iframe
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>
The target of <a> should have the name of the <iframe>:
<p>Open map</p>
<iframe name="map"></iframe>
You can also use JavaScript:
document.querySelector('a').addEventListener('click', e => {
e.preventDefault();
document.querySelector('iframe').src = e.target.href;
});
<p>Open map</p>
<iframe></iframe>
In short, we have a page with an iframe, and I want to target the page URL dynamically.
For simplicity, the page is located at http://1/2/3.aspx
The iframe would be on the 3.aspx page, and the iframe points to a completely different URL, let's say http://100/101/102.html
I want to target the iframe to go to http://1/2/"some URL"
A coworker suggested inline javascript using window.location.parent, but I can't figure out how to implement this. Using the usual ../ in the link's href tag only results in me navigate up within the frame's context (to 101, 100, so on).
As always, thank you to the community for your time.
EDIT: I would like to use inline javascript for this if at all possible.
I guess you mean something like this
<iframe id="ifr" src=""></iframe>
<script>
document.getElemenById("ifr").src = "http://1.2.3/page.html";
</script>
Update
To use location data from the iframe's parent, you can do like this
<iframe id="ifr" src=""></iframe>
<script>
var parenturl = parent.location.href;
var newurl = parenturl.replace("from-this","to-this");
document.getElemenById("ifr").src = newurl;
</script>
I am using iframe popup and i want to change something outside of iframe with jquery from iframe ?
this need to be done with jquery.
code like this
<iframe> <div id="change">Change css</div> </iframe>
<div class="outer-div"> Text goes here </div>
<script>
$("#change").live('click', function(){
$('#outer-div').css('display','none');
});
<script>
i want to hide of outer div click on iframe inner div
thanks
Simranjeet singh
This is some code that has worked for me.
Assuming that the iFrame is within the same domain as it's parent, try this:
// -- Find the PARENT of the iFrame that this script runs in
var $topLevel = $(window.parent.document, window.parent.document);
If you then use $topLevel as a starting point for your jQuery it should work.
Be aware that this codes works alright in modern browsers but doesn't seem to operate in IE8 (and untested below IE8)
<html>
<body>
<iframe id="src">
</body>
</html>
I want to have the iframe show up in the div element through a Javascript function but I can't seem to figure out what isn't working. Any ideas?
document.getElementById('site').src = http://www.w3schools.com/;
Thanks in advance!
Try
document.getElementById('src').src = 'http://www.w3schools.com/';
a) the url should be provided as string (quoted)
b) the id of your iframe is src not site
Your iframe don't have the id site, so your code won't have any effect.
(Also please note that you didn't close the iframe tag) .
Here's the right code (fiddle) .
<input type="button" onclick="changeIframeSrc('myFrame');" value="changeSrc">
<iframe src="http://www.example.com" id="myFrame"></iframe>
<script>
function changeIframeSrc(id) {
e = document.getElementById(id);
e.src = "http://www.wikipedia.com/";
}
</script>
First, a couple small things:
the id on your iframe appears to be src and not site; and
you need to close the iframe tag.
Assuming that you're just dealing with one iframe and it has an id then by all means:
var myIframe = document.getElementById('src');
// gives you just that one iframe element
You may want to consider document.querySelectorAll though, in case you're working with more than one iframe.
var iframes = document.querySelectorAll('iframe');
See that in action: http://jsbin.com/equzey/2/edit
And important side note: if all you need is access to the iframe element (e.g., to manipulate its source or to apply CSS via the style attribute) then the above should be fine. However, if you need to work with the contents of the iframe, you'll need to get inside its web page context with the contentWindow property:
var iframes = document.querySelectorAll('iframe');
iframes[0].contentWindow;
I managed to change an iframe's src with javascript
var path='images/tattoo/fullsize/';
var h=$('#borderlessFrame').height();
var bigFrame=$('#borderlessFrame');
function loadGallery(num)
{
bigFrame=$('#borderlessFrame');
var galPath=path + num; // path to the image
h=$('#borderlessFrame').height();
var source=bigFrame.attr('src');
source='i load some address here';
}
But for now i see the old content of the iframe , is there a way to reload the iframe ( only iframe not the whole page)
The thing i am trying to achieve is a simple gallery , thumb pictures on the bottom and a large picture on the top ( iframe ). On click on any of the thumbs , i change the content of the iframe without reloading the actual page.
Keep in mind that i am new to html/javascript/jquery.
So basically i need a way(function?) to reload the iframe.
To set attribute, you need to call .attr( attributeName, value )
Try this:
var source='i load some address here';
bigFrame.attr('src', source);
Reference:
jQuery .attr()
jQuery has the load method, which is useable like so (assuming borderlessFrame is the id of the <iframe>):
var iFrame = $('#borderlessFrame');
iFrame.load('http://theurltoload.com')
However, iframes seem like an unnecessary approach for your requirements, consider looking into CSS and the jQuery DOM manipulation methods a little more.