I'm loading a content dynamically to the <iframe>
<iframe style='border:none;' id='abc' src="http://localhost:39217/Home/GetContent/some_dynamic_code"></iframe>
after a success response, in that iframe is that content
<html>
<head>
<script type="text/javascript">
function onPageLoad() {
if (document.readyState === "complete") {
var cont = document.getElementById("abc");
alert(cont);
}
}
</script>
</head>
<body onload='onPageLoad()'>
<a target="_blank" href='http://lorem'>
<img class='abc' style='max-width:300px; max-height: 38px;' alt='' src='/Images/image.png' />
</a>
</body>
</html>
That iframe will be using outside my site (by users), but I want to have the ability to change the <img> src. But, I need also to change the width/height of the iframeafter I change the image. So, how can I get the access to that iframe using JS ? That code above alerts me null
I made an example for you here: http://jsfiddle.net/KRaWU/2/
I use jQuery to achieve that and I suggest you do the same.
// this will find a button within an iframe
var obj = $('iframe').contents().find('.actionButton').find('input[type="submit"]');
// this will change the value of the button, and you can see that the text is changed.
obj.attr('value', 'LOG ME IN');
You can analogically find an img and change its src.
JS interaction between iFrames and their parents is for what I know impossible or at least troublesome. I know there is somewhere a property window.frames and maybe even frame.parent but in general, JS interaction like that is impossible. I think you should consider another type of solution (like an ajaxcall maybe, if that could satisfy your needs).
Related
Background
I am attempting to read (and eventually change) content within the body of an IFrame (in my example this involves h1 tags) embedded in a Confluence page.
Confluence Behavior
Initially I didn't think it was significant, but as comments by #ScottMarcus illustrate; it does matter that this work is for a possible Confluence plugin. This is because I am using a page decorator containing JavaScript that executes when a user edits a Confluence page.
IFrame Restrictions
This means that (to my knowledge) I cannot have JavaScript execute after the editable IFrame has been added to the DOM. It also means that I cannot control what content is added to the IFrame (although this is OK/expected, as the idea is to enhance the user experience if they add tables and install the plugin).
Example
For reference, here is what the wysiwyg Confluence editor looks like for my page (annotated with a couple key elements from my HTML below):
Problem
Although I have been able to read/log the HTML present within the IFrame, I cannot seem to access elements in the same way I am able to within the main document. I have tried different variations on what I have below, doing things like...
selecting elements by ID--for some reason this seems less reliable in this context?
trying to get the contents() or children() of elements--in many cases I get null reference exceptions when trying this
accessing the body from my IFrame object--again, this doesn't seem the same as doing document.body
JavaScript
function doStuff() {
$('#wysiwygTextarea_ifr').ready(function () {
let iFrame = document.getElementById('wysiwygTextarea_ifr');
let frameDoc = iFrame.contentDocument ? iFrame.contentDocument : iFrame.contentWindow.document;
let h1Tags = frameDoc.getElementsByTagName('h1');
//would like to iterate over the collection of h1 tags here, but it always seems to be empty
});
}
HTML
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="../Libraries/main.js" type="text/javascript"></script>
<script type="text/javascript">
doStuff();
</script>
<iframe id="wysiwygTextarea_ifr">
#document
<!DOCTYPE html>
<html>
<head>
<title>blah</title>
</head>
<body id="tinymce">
<h1 id="meh">abcde table</h1>
<h1 id="neh">zzz</h1>
</body>
</html>
</iframe>
</html>
I am trying to change the src of an image using javascript. The image and the javascript function are in different html pages.
The javascript function is given below
<html>
<head>
<script type="text/javascript">
function changeImage(newSrc)
{
document.getElementById(dp).src = newSrc;
}
</script>
<title>Socialize-Home</title>
</head>
<body>
<img id="img1" src = "home images\student1.JPG" onclick="changeImage(this.src)"></img>
</div>
</body>
</html>
The image of another page is given below
<img id="dp" src="home images\unknown user.JPG" alt="Your browser doent support this
image !" height="25%" width="15%"/>
If you're using AJAX, it puts the second page into the first. There is therefore no need to do anything special. The AJAX'd in content is inside the page and so can be accessed how you would normally access elements.
Therefore your idea should work. However, you have a slight syntax error:
document.getElementById(dp).src = newSrc;
should be:
document.getElementById('dp').src = newSrc;
dp is a string, you haven't defined a variable called dp.
On a side note, the alt tag for an image isn't really anything to do with your browser "not supporting" images. The alt text is displayed if the image is missing or if the user is visually impaired and is using a screen reader.
You need to have some reference to the other window, for instance you can have the window set opener.childwindow = self in the window with the target image. Or whatever you have to do.
Then it's just referenceToOtherWindow.document.getElementById('dp').src = newSrc;
I'm trying to change the value of a text box within iframe.
I have tried using GetElementById in every way i could find and nothing seems to work.
I found a alternative to iframe by using the Object data tag but it has the same problem.
My code more or less, I changed it a bit for presentation:
<html>
<head>
<title>None</title>
</head>
<body>
<script type="text/javascript">
function changeValue() {
var textBox = document.getElementById('userName');
textBox = "hello!";
}
</script>
<iframe id="myFrame" src="http://www.website.com"></iframe>
<input type="button" onclick="changeValue()" value="Submit">
</body>
</html>
This is not possible for security reasons.
If you had access, you would be able to load, say facebook.com in an iframe on your website and extract user details with JavaScript.
Try something along the lines of
document
.getElementById('myFrame')
.contentWindow
.document
.getElementById('userName')
.value='hello';
As the others pointed out, this will only work if the page inside the iframe is on the same domain.
Okay so in my page I have an iframe element which will load HTML that will always have a specific line of HTML code in it that I need to replace when the iframe is loaded. The iframe src will vary so it has to be done as the iframe is loaded. The HTML I want to replace is in the file that's loaded by the iframe and it will look something like this:
<div class="myclass1" style="height:XXXpx; width:YYYpx;">
So what I need is actually for every div that has class="myclass1" to have the height attribute of the style stripped and the width kept whatever it was. All "myclass1" divs will follow this format. So I want to replace all lines like that with this:
<div class="myclass1" style="width:YYYpx;">
I'm not very experienced with javascript at all really so any help, even just pointers, is appreciated because I don't know how to start of even if this is possible.
If the src of the iframe is on the same domain, use this :
var iFrame = document.getElementById("your-iframe-id");
if ( iFrame.contentDocument )
{
iFrameDocument = iFrame.contentDocument;
}
else if ( iFrame.contentWindow )
{
iFrameDocument = iFrame.contentWindow.document;
}
The use iFrameDocument.getElementById or whatever you need
You can use the following example for change the styles of loaded div,Call the javascript function after loading the page .
<html>
<head>
<script type="text/javascript">
function change_style()
{
document.getElementById("div_id").style.width="yyypx";
}
</script>
</head>
<body>
<div id="div_id" class="myclass1" style="height:XXXpx; width:YYYpx;">
-------------------
-------------------
</div>
<script>
change_style();
</script>
</body>
</html>
I have a website which I host myself. I do not have a static IP address so I have all traffic for my domain forwarded with masking to my DDNS account. The resulting page looks like this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>mydomianname.com</title>
</head>
<frameset rows="100%,*" border="0">
<frame src="http://myddns.dyndns.org/mydomainname" frameborder="0" />
<frame frameborder="0" noresize />
</frameset>
</html>
How can I update the URL of the "parent" frame as users navigate within the "child" frame?
UPDATE: Success?
I have tried doing this with javascript but had an issue getting the correct href to my javascript function with out having adverse side effects (having two windows open up, having my main window go to the wrong location, or making it so the back button didn't work right). All I needed was an attribute of my a tag to hold a value that I could use in my javascript, but would do nothing else at all. Adding the attributed value event though it is not a native attribute to the a tag works great.
The a tag...
<a onclick="url_update(this);" value="test/test.html" href="javascript:void(0);">test link</a>
and the javascript function...
function url_update(element){
base_url = 'http://mydomain.com/';
window.parent.location.href = base_url + element.getAttribute('value');
}
the resulting updated URL is...
http://mydomain.com/test/test.html
... and there are none of the previously mentioned side effects.
The only "side effect" that I would like to fix is display of the link in the info bar at the bottom of a browser window. Right now it says javascript:void(0); because that is what is written in my href attribute, but I would like it to show the updated URL when the link is hovered over... any thoughts?
It would be even better if I could scrap all of this javascript and use IIS 7 URL Rewrite 2.0 to do this instead... but I have yet to master the black art of URL rewriting.
javascript:
window.top.location = 'anther url'
--UPDATE to your updated question
use element.getAttribute('value') instead of element.value
--UPDATE #2
Use the href attribute, however, add a return false; to the onclick function:
<a onclick="url_update(this);return false;" value="test/test.html" href="test/test.html">test link</a>
Once you are doing that, you might aswell skip the value attribute and just use the href property, update your url_update function to use element.href instead of element.value
It's hard to tell from your question exactly which frames are doing what, but if The Scrum Meister's solution works for you, than you can easily implement what you want by adding this to each of your A tags.
target="_top"
Your example modified.
test link
You could also do this with jquery...
On the page where all A tags should have target="_top" you can implement the following jquery code on the page and it will dynamically add the target to all links.
<script language="javascript" type="text/javascript">
$(function()
{
$("A").attr("target","_top");
});
</script>
That is assuming that you have normail A tags with the href attribute, you can get rid of the onclick all together, no other javascript is required with the target solution.
First you need to be on the same domain... otherwise for security reasons you can not change it.
Declare and call this function in your child frame
function change(theUrl){
window.parent.reloadContent(theUrl);
}
In your parent have the following function :
function reloadContent(theUrl){
if (theUrl != ""){
document.getElementById("frameID").src= theUrl ;
}
}