I have a page that looks like this:
<div class="myclass" id="div1"><iframe id="frame1" src="myiframe.html"></div>
<div class="myclass" id="div2"><iframe id="frame2" src="myiframe.html"></div>
In my iframe, I need to know the id of the div of its parent node, but I don't know how.
I searched for a solution without jquery but all I found was something with getElementById stuff and I am actually searching for the id.
Can someone help me?
You must know that, as far as your JS code inside the iFrame is concerned, the window is the iFrame, and the document is the content of that iFrame. Here's a little function that should work for you, in order to the parent's document:
var parentDoc = window;
while(parentDoc !== parentDoc.parent)
{
parentDoc = parentDoc.parent;
}
parentDoc = parentDoc.document;
var iFrames = parentDoc.getElementsByTagName('iframe');
var divs = [];
for(var i=0;i<iFrames.length;i++)
{
divs.push(iFrames[i].parentNode);//assuming the first parent is the div
}
That should do the trick
try like this:
parent.document.getElementById("div id")
var parentDivOfIfame1 = $("#frame1", parent.document).parent();
Related
I have an anchor tag element coming in the html like:
Now in the javascript function, I have written:
function handleEvent(sourceElement, txt) {
console.log(sourceElement);
}
the consoled element is coming as the window in this case.
I tried sourceElement.document.activeElement but it doesnt seem to work in chrome, where it is coming as body element.
I cannot change the structure of the anchor tag to 'onClick' function as this is coming from some other source.
Is there some way to find the calling element in this scenario?
The real answer here is to change the HTML, which you've said you can't do. I'd push back on that if you can. If you're writing the function, and the function name is in the HTML, how is it you can't change the HTML??
But if you really, really can't, you can update the DOM once it's loaded:
var list = document.querySelectorAll('a[href^="javascript:"]');
var x, link;
for (x = 0; x < list.length; ++x) {
link = list[x];
link.onclick = new Function(link.href.substring(11));
link.href = "javascript:;";
}
Live Copy | Live Source
This is fairly naughty, as it uses the Function constructor (which is very much like eval), but if you trust the source of the HTML, that should be okay.
Or of course, if you don't have to use whatever was in the href to start with, just hook up your event handler in the code above and don't use new Function.
try something like this, use jQuery
just select the link tag with your selector
$(function(){
var href = $('a').attr('href');
href = href.replace('javascript:','');
$('a').attr('href','#');
$('a').attr('onclick',href);
})
This is just workaround solution.
If you have access to the js, you could do something like this:
document.addEventListener('DOMContentLoaded', function(){
var link = document.querySelectorAll('a');
link[0].addEventListener('click', function(e){
console.log(e.target);
});
});
With this, you would be just not be doing anything with the inline href event and just be appending your own handler.
And if no other answer here works for you because you can't update the DOM after it's loaded (try doing any of them if you want to modify a squarespace lightbox - not saying it's impossible, but...), here's an out of the box thinking:
Sometimes there will be something hinting where the a href is. So you could use it.
<div class="hint current">
<a href="javascript:handleEvent('.hint')">
In my case, I even knew the hint without needing a parameter, which made things even simpler:
function handleEvent (hint) {
if(!hint) {
hint = $("div.current");
}
hrefElement = $(hint).find('a[href^=javascript]');
}
This of course will make sense if your DOM is constantly being changed by a script you have no access to.
But even if there is nothing hinting on the a href, you still could do something like this:
<a href="javascript:var x=1;handleEvent(1)">
function handleEvent (uniqueId) {
hrefElement = $('a[href^=javascript:var x='+uniqueId);
}
<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 want to access the currently loaded document of an iframe and link that document to another iframe, for this I tried:
$("#if1").attr("src", $("#if2").attr("src"));
But this loads the document again. I want to access the document already loaded in #if1. How can I do this?
$("#if1").attr("src", $("#if2").attr("src"));
But this loads the document again.
Err, yeah, that's what you are doing: you are setting if1's src to if2's src. That's why it reloads the iFrame... If you exchange if1 and if2 in your code it might do what you're trying to do -- if I managed to understand you.
Check out this running demo: http://jsfiddle.net/aymansafadi/BanTV/5/show/
The key part you might be interested is:
$('#swap').on('click', function() {
var iframe1 = $('#if1')[0].contentWindow.location.href;
var iframe2 = $('#if2')[0].contentWindow.location.href;
$('#if1')[0].contentWindow.location.href = iframe2;
$('#if2')[0].contentWindow.location.href = iframe1;
});
NOTE: This, and anything else you you try, will only work if both iframes are under the same domain as the parent window.
You can also use .src('attr') to set the URL, but not get the current URL.Demo: http://jsfiddle.net/aymansafadi/BanTV/7/show/
$('#swap').on('click', function() {
var iframe1 = $('#if1')[0].contentWindow.location.href;
var iframe2 = $('#if2')[0].contentWindow.location.href;
$('#if1').attr('src', iframe2);
$('#if2').attr('src', iframe1);
});
I'm trying to get an image to display in a div depending on the URL of the page. This div is in an include file that gets used for all pages of the website. What I want is if it's the homepage (with or without index.php), is for the div to show the image. What I've pieced together so far is:
<script type="text/javascript">
var d = location.href
if (d="website.com" || "website.com/index.php")
{
<img src="/images/DSLogo2.jpg" />;
}
</script>
I'm not sure if this is correct, or even the best way to go about it. Any help is very greatly appreciated, as I am still learning more and more each day.
Try:
<script type="text/javascript">
var d = window.location.href
if (d="website.com" || "website.com/index.php")
{
document.write('<img src="/images/DSLogo2.jpg" />');
}
</script>
Do not confuse = and == operator. The correct way how to code the condition is
if (d=="website.com" || d=="website.com/index.php")
Javascript is not a preprocessor, you can't usi it to create the code like in PHP. If you want to add element, you have to work with DOM:
<div id="target"></div>
<script>
var d = location.href;
var target = document.getElementById("target");
if (d=="website.com" || d=="website.com/index.php") {
target.innerHTML = '<img src="/images/DSLogo2.jpg"/>';
}
</script>
JavaScript doesn't work that way. You could use document.write with logic like that but something like this would be better:
if (your logic here) {
var image = document.getElementById('my_image');
image.src = 'some_image.jpg';
}
Notice that assumes you'll have a unique id on your image element. You'll want to put this logic in the document ready event or window on load.
I'm trying to take the contents of a div within an iframe, delete the iframe, and display only the div. I can't figure out why this won't work- I am not sure of whether to use contentWindow or contentDocument.. Any pointers? Thanks!
I have one div with id "iframe", within that the iframe with id "embedded_article",
<script type="text/javascript">
function getContentFromIframe()
{
var parent = document.getElementById('iframe');
var child = document.getElementById('embedded_article');
var oldContent = child.contentWindow.document.innerHTML;
var newContent = child.contentWindow.document.getElementById('ec-article').innerHTML;
document.getElementById('iframe').removeChild(document.getElementById('embedded_article'));
parent.innerHTML = newContent;
}
</script>
Your example:
document.getElementById('iframe').removeChild(document.getElementById('embedded_article'));
Should look something like:
var element = frames['iframe'].document.getElementById('embedded_article');
element.parentNode.removeChild(element);
window.frames['yourFrameId'] evaluates to the window object associated with your frame. when you use document.getElementById, you want to use the document belonging to your frame's window, not the document in your main window. The rest should be self-explanitory.
to get to the div inside an iFrame you can try something like this
var div = document.getElementById("YourIFrameID").contentWindow.document.body.getElementById("YOUR_DIV_ID")