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>
Related
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 have a knowledge base for my work. I'm trying to get full html w/scripting setup within a iFrame instance.
Below is a Chrome expansion of my setup. When I click the button in my div/iframe, I get a Uncaught ReferenceError: test is not defined error.
Thoughts?
http://bytes.com/topic/javascript/answers/153274-script-iframe-can-not-call-functions-defined-parent-document
Per link:
Functions are not properties of the document, but of the window.
Try
parent.foo();
or
top.foo();
<button onclick='parent.test();'>test</button> works now... top.test() works too, BUT, I'd like a way to normalize this. Its not very intuitive.
Is there a way to NOT have to prefix top. or parent.?
Make sure the jQuery library is being called before any other script inside your <head> section.
Most of the times I get this error, I just change the order the scripts being called on the page (always under jQuery) and it solves the problem.
This is a late answer, but I'll share my solution.
I needed an iframe as a preview container. So parent.something would be a hassle.
This seems to work:
<iframe id='iframe' sandbox="allow-same-origin allow-scripts"></iframe>
And populate it with this (example using jquery):
$(function() {
let $iframe = $('#iframe');
$iframe.ready(function() {
let ifhead = `
<meta charset="UTF-8"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"><\/script>`;
let ifbody = `<h1>My Body</h1>`;
let ifscript = `$(function() { $('h1').css('color', 'blue')})`;
let html = `<html><head>${ifhead}</head><body>${ifbody}<script>${ifscript}<\/script></body></html>`;
document.getElementById("iframe").contentWindow.document.open();
document.getElementById("iframe").contentWindow.document.write(html);
document.getElementById("iframe").contentWindow.document.close();
});
});
Now the iframe acts as a stand-alone page.
I am creating an iframe using jQuery to a "cross-site" URL. This works properly in Firefox but IE is prepending the parent pages domain to the iframes src URL.
An example would be if I am creating the iframe (with jQuery):
<iframe src="http://www.google.com"></iframe>
The page that IE would try to load is:
http://www._mysite_.com/http://www.google.com
If I statically in the HTML create the iframe everything works fine. It is only when I make it using JS that it loads the wrong page.
I suppose I would understand if this was intentional cross-site protection that IE has built in, but I am wondering if that is the case, or if I am missing something.
Is this default behavior for IE? If anyone has a workaround it would be greatly appreciated.
EDIT:
Generated code is:
<iframe id="myIframe" width="500" height="400" frameborder="0" src="http://www._website_.com/aaa/bbb/ccc">
I tested the generated code at static HTML and it did work properly in IE.
EDIT 2:
This is how I am creating the iframe:
jQuery('.signUp').live('click', function() {
var url = 'http://www._website_.com'+$(this).attr('href');
var thisModal='<div id="dialogRes" class="windowG"><iframe id="iframeG" frameborder="0" width="500" height="400" src="#"></iframe></div>';
jQuery('body').append(thisModal);
jQuery('#iframeG').prop('src', url);
return false;
});
On this line:
jQuery('#iframeG').prop('src', url);
I have tried attr() as well as removing it all together and just putting the url in the src tag of the iframe. Nothing seemed to work.
The problem is that in IE, the href attribute is always returned as an absolute URL. So if you had
<a id="demo" href="bar/baz">...</a>
Then your on your website http://mydomain.com/foo:
jQuery('#demo').attr('href') == 'http://mydomain.com/foo/bar/baz';
Two options to work around this are to either parse out the (possible) full domain from the href attribute, or to use a different custom attribute just to hold the target address/path (eg data-href).