How does target="framename" work when iframe DOM has changed - javascript

I know iframes are evil, but mine is legacy app n I need to use iframes in it. So...
I need to create n display tabs of iframes dynamically for my web app. All frame sources are intra-domain so full traversal n access within the frames possible.
The problem with iframes n the DOM is that these iframes register as window.frames.framename, so I will have an array of those objects in the "frames" object.
My requirement states that the "active" frame must have the name "form". So I change that iframe attribute when setting that frame as active. But this doesn't reflect in the DOM as window.frames.form, so I change that too manually by setting the current frame object like this:
frames.form = my_frame.content Window
All this works fine n I'm able to now access everything in n out of the active "form" iframe properly.
The problem now is with my links in the main page that have target="form". The target is not being recognized as the latest set (active) iframe with the name "form", n hence that link when clicked opens up in a new window/tab in the browser. This behavior is in all browsers except firefox. (Firefox does the required thing: open those links in the latest form iframe)
I suppose I don't have the knowledge of how the browser manipulates such changes in the DOM related to iframes. So any help would be appreciated. Thanks!
UPDATE:
Here's a simplified code (note: not original code): http://jsfiddle.net/u4VJL/5/
function AddNewTab(e) {
$('#list').attr('id', 'nolist').attr('name', 'nolist');
$('#form').attr('id', 'noform').attr('name', 'noform');
$(document.body).append('<iframe id="list" name="list" src="" marginwidth="0" marginheight="0" scrolling="auto" frameborder="1" class="form" style="width:22%"></iframe>');
$(document.body).append('<iframe id="form" name="form" src="" marginwidth="0" marginheight="0" scrolling="auto" frameborder="1" class="form" style="width:74%"></iframe>');
frames.list = $('#list')[0].contentWindow;
frames.form = $('#form')[0].contentWindow;
return false;
}
$('#addnew').click(AddNewTab);
Steps to reproduce the issue:
Click the "Add new tab" link once.
Click "Sample link" - and that href will load in the right frame
named "form".
Click "Add new tab" again. A new set off iframes should show up.
Click "Sample link" again. The page should now load in the 2nd right
frame, but it loads in first.
NOTE: Browsers with this issue (that I've tested in): Google Chrome,
IE8. Firefox does not have this issue.

you need to use live:
$('#addnew').live("click", AddNewTab);
uhh, it was a wrong answer, i think you need to look this way:
$("a[target=form]").click( function(){
$("#form").last().attr("src", $("a[target=form]").attr("href"));
$("#form").reload();
return false;
});
this works

frame name indeed. This works (in Firefox, Chrome, and IE8 n above):
function AddNewTab(e) {
$('#list').attr('id', 'nolist').attr('name', 'nolist');
$('#form').attr('id', 'noform').attr('name', 'noform');
if (frames.list) frames.list.name = 'nolist';
if (frames.form) frames.form.name = 'noform';
$(document.body).append('<iframe id="list" name="list" src="" marginwidth="0" marginheight="0" scrolling="auto" frameborder="1" class="form" style="width:22%"></iframe>');
$(document.body).append('<iframe id="form" name="form" src="" marginwidth="0" marginheight="0" scrolling="auto" frameborder="1" class="form" style="width:74%"></iframe>');
frames.list = $('#list')[0].contentWindow;
frames.form = $('#form')[0].contentWindow;
frames.list.name = 'list';
frames.form.name = 'form';
return false;
}
$('#addnew').click(AddNewTab);
Working code here: http://jsfiddle.net/krislogy/u4VJL/8/
((PS: tchh!! I swear I had tried this but couldn't make it work before. Anyway, I guess I was wrong when I thought I tried it. Thanks all!!))

Related

On page reload entire focus on an id

I'm working on some accessibility stuff for a client and the site is basically in Ruby on Rails but I know this needs some JS that I'm pretty weak with. The site has three links that then trigger an iframe. So it's something like this:
<%=link_to("Alpha", "#alpha")%>
<%=link_to("Beta", "#beta")%>
<%=link_to("Gamma", "#gamma")%>
<iframe src="<%=#url%>" width="100%" height="500px;" id="myFrame" tabindex="0" title="<%=#title%>"></iframe>
<script>
window.onload = function() {
document.getElementById("myFrame").focus();
};
</script>
I'm testing the screen reading using ChromeVox and on page load/and reload it will read off the navigation from the top of the page. The keyboard focus is definitely on the iFrame but it reads through the entire page.
So how do I force the entire focus on the iFrame on a page reload?
This answer here seems like it may work for you. That would mean updating your code to have the aria-live attribute "assertive", such as:
<iframe src="<%=#url%>" width="100%" height="500px;" id="myFrame" aria-live="assertive" tabindex="0" title="<%=#title%>"></iframe>

Changing an iframe SRC dynamically

What I have and I need to do it work properly is when I'm in a "start page" and I click a button like this:
PAGE-1
Point A
It should send me to "another page" where I load dinamically an iframe taking each variable (shopID, type, max-levels and point) from the URL and print it like an iframe this way:
PAGE-2
<iframe id="frame" src="http://myappwebsite/resourcesiframe?shopId=3366&type=image&point=A" width=“XXX" height=“XXX"></iframe>
I've used this javascript snippet but anyway, I can't make it work properly at all.
$(".map-button").click(function (e) {
e.preventDefault();
$("#frame").attr("src", $(this).attr('data - iframe - src'));
});
I only need to get the variables from the data-iframe-src and use them in the iframe, but I'm not able... The problem is that I load elements in different pages, so I don't know how this affect to the URL variables.
I've founded a simple solution for my problem here and it works for me.
First of all I put this simple iframe in my PAGE-2:
<iframe id="frame" src="" width="100%" height="auto" frameborder="0" scrolling="yes"></iframe>
Then in PAGE-1 I've used this type of links:
https://myappwebsite/page-2?shopId=1234&type=image&max-levels=1&point=A
So now my PAGE-2 loads properly with these params in the URL. Then I've used this simple snippet in Javascript to fill my iframe in PAGE-2:
<script type="text/javascript">
$( document ).ready(function() {
$("#frame").attr("src", "https://myappwebsite/resourcesiframe" + window.location.search);
});
</script>
And it works! Now I can go to PAGE-2 with all my params, pick them and use them in SRC inside the blank iframe.
Thanks for getting me in the correct path!

Iframe doesn't resolves the value from controller after the first load

I am using angular js frame work and has an iframe tag inside a ng-dialog. I am passing the src as
var SrcUrl=staticurl+dynamicUrl;
$scope.IframeSrcUrl=$sce.trustAsResourceUrl(SrcUrl);
and at the html
<iframe src="{{IframeSrcUrl}}" name="frame2" id="frame2" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" onload="" allowtransparency="false" height="350px" width="100%" ></iframe>
The iframe will resolves the proper url on its initial load.. but once if i close the ng-dialog and again open it; it will consider the "IframeSrcUrl" as string take it as a param for my base url and will return a 404 error.
i have tried ng-src instead of src.. but it also didn't works..
here staticurl is an externally hosted site and dynamicUrl is a dynamic genarated parameter. whenever i do some action , for instance a button click i need to start the ng - dialog box which redirects to the IframeSrcUrl via iframe.
now the problem is that , on second load the iframe considers IframeSrcUrl as a string and try to redirect to
"http://localhost:1337/%7B%7BIframeSrcUrl%7D%7D"
On load event of the dialox box, try this :
document.getElementById('frame2').src = document.getElementById('frame2').attr('data-src') and put the attribute data-src={{IframeSrcUrl}} on your iframe.

Unable to change HTML iframe source with Javascript

I'm trying to have a 'video of the day' on my website. I currently have most of this working, and here's how I plan to have it working in the end:
Have a Python script run once every 24 hours to pick the random YouTube video of the day
Write the embedded video URL to a text file
Use Javascript to access the text file and grab the video URL, and use it as the iframe source on my webpage
As I mentioned above, this plan is currently working for the most part. My script is able to pick the random video, and write it to a text file. My web page is then able to pull the video URL from the text file, and write it to the webpage in text form. However, I'm having some troubles having it write the video URL to my iframe.
I did some searching, and people suggested trying the following code:
<iframe id="mainvideo" width="720" height="480" frameborder="0" src="" allowfullscreen></iframe>
<script>
document.getElementById("mainvideo").src =
finalresult + ReturnURL();
</script>
So earlier in my code, I declared the variable 'finalresult' to be the following value: //www.youtube.com/embed/WJDnJ0vXUgw
When I have Javascript write 'finalresult' to my webpage, it will write the video URL as text to the webpage as expected. However, when I try and declare it as the source for the iframe, I end up with a blank iframe on the page.
Does anyone know what the problem is with my code for it not showing this video in my iframe? Any help would be appreciated.
You must be changing the src after any particular event is fired. So try this way,
HTML :
<iframe id="mainvideo" width="720" height="480" frameborder="0" src="http://www.bing.com/" allowfullscreen></iframe>
<button id="changeSrc">Change iFrame</button>
javaScript :
var iframe = document.getElementById("mainvideo");
changeSrc.onclick = function(){
iframe.src = "http://www.w3schools.com/";
};
jsFiddle
Update 1 :
If you want to change the iframe src attribute after page load then go with this way,
window.onload = function(){
var iframe = document.getElementById("mainvideo");
iframe.src = "http://www.w3schools.com/";
};
jsFiddle
If myframe.src does not work for you, then try out myframe.contentWindow.location.href like in this pen.

Accessing element inside iFrame returning null

I have a form that posts to an iFrame. The website inside the iFrame is something I have no control over. However I would like to set the display of a few images inside the iframe to "none".
<form id="testForm" method="post" target="testFrame">
<input type="hidden" name="RequestXML" ID="RequestXML" value="<Request><RedirectURL>Account/TokenRequest</RedirectURL></Request>"
</form>
<iframe id="testFrame" name="testFrame" frameborder="0" style="width:1000px;height:500px"> </iframe>
Here is my script at the top of the page:
<script type="text/javascript">
$(function () {
$("#testForm").attr("action", "http://externalwebsite.aspx");
$('#testForm').submit();
var iframe = document.getElementById('testFrame');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
//alert($("#testFrame").contents().find("body").html());
//alert(innerDoc.innerHTML);
});
</script>
Both my alerts return null in Chrome, IE and firefox. What is the best way to access the elements inside that iframe. (in chrome i dont even see the html of that website when I try to do "inspect element" and view the html)
By the way I am doing all this in a MVC4 project
Assuming this is not a cross-domain issue, try:
var body = $('#testFrame').contents().find('body');
Since this cross domain you have two options.
if you have access to the iframe code, then you can place XDM code in there, maybe easyXDM would help.
Or
you have to go server side and get your php/asp.net etc backend to go get the page and get what data it needs.

Categories