iframe created with jquery prepends absolute URL with current domain - javascript

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).

Related

How to change path / src inside the iframe dynamically?

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>

Iframe/href difficulties

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>

javascript frame navigation in ie11 with a pdf

I have a simple web page where 1 frame displays a pdf and another a menu bar.
<iframe src="bar.html" name="menu" ></iframe>
<iframe src="doc.pdf" name="itempane" ></iframe>
Using chrome I can navigate from the menu bar to the parent and back down to the frame containing the pdf in order to print it
var pWindow = window.parent;
pWindow['itempane'].print();
Attempting to do the same in IE11 gives an Invalid calling object error.
you can see this at http://www.abhrdev.co.uk/main.html
What am I doing wrong / what is IE doing differently?
Cheers
Updated.....
I think I have proved that this is not a javascript coding issue but related to the pdf handling in IE. With the following page
Print PDF<br/>
Print HTML
<iframe src="bar_1.html" name="menu" ></iframe>
<iframe src="doc.pdf" name="pdfpane" ></iframe>
<iframe src="doc.html" name="htmlpane" ></iframe>
and this function
function printFromMain(paneName) {
var pWindow = window[paneName];
pWindow.focus();
pWindow.print();
}
the printing of the html page works but not the pdf the pWindow.focus() gives Invalid Calling Object - any insight into why that might be greatfully recieved
After trying several things, I finally go this to work in IE11:
1) use an object tag instead of iframe
2) run focus() / print() directly on the element
3) run after a timeout, to make sure everything in is loaded. There may be a better way (like using some event listener) to do this, as the timeout time needs to be fairly long for it to work properly
setTimeout(function () {
var contentThingy = document.getElementById('itempane');
contentThingy.focus();
contentThingy.print();
}, 4000);
Object (with a specified id) instead of iframe:
<object id="itempane" ... ></object>
Note: doesn't work in chrome. One of the other variations in the other answers (i.e. using ContentWindow) may.
Try actually using the window.frames to get the frameList and reference it by the frame name that way.
var pWindow = window.parent; //reference the parent from the iframe
var ifr = pWindow.frames.itempane; //get the pdf frame from the frame list
ifr.focus();
ifr.print();
Try this
<iframe src="bar.html" name="menu" ></iframe>
<iframe src="doc.pdf" ID="itempane" ></iframe>
var otherPane = parent.document.getElementById("itempane");
otherPane.focus(); // OR
otherPane.print(); // OR
var doc = otherPane.contentWindow || otherPane.contentDocument;
doc.focus();
doc.print();

dom referencing only working correctly in IE

I have a javascript function that I am calling from an image onClick event in my page.
Basically the function sets a variable which is referencing an element within the same page.
here is how the function is called (note, the html is printed using PHP, but don't think that has any effect on the html itself):
echo "<img src='site/images/apps/show.gif' onClick='apps()' id='appbutton' style='#'>";
here is what the script references:
<iframe frameborder="0" name="app_frame" src="site/apps.html" width="0%" height="100%" scrolling="no"></iframe>
and finally, here is how it is referenced and what is done with it:
<script type="text/javascript">
function apps()
{
var element = document.getElementById("app_frame");
if (element.width == '0%')
{
parent.document.getElementById("frame").setAttribute("width","100%");
parent.document.getElementById("app_frame").setAttribute("width","0%");
parent.document.getElementById("appbutton").setAttribute("src","site/images/apps/show.gif");
parent.document.getElementById("wthrbutton").style.visibility="hidden";
}
else
{
parent.document.getElementById("frame").setAttribute("width","65%");
parent.document.getElementById("app_frame").setAttribute("width","35%");
parent.document.getElementById("appbutton").setAttribute("src","site/images/apps/hide.gif");
parent.document.getElementById("wthrbutton").style.visibility="visible";
}
}
</script>
The main issue is on the first line of the function, var element = document.getelementbyid.
Firefox, Chrome and Safari all hve issues with this, and none of them seem to set the variable, which renders the rest of the script useless, as the whole thing revolves around the variable.
Anyone know any other way of setting that element as a variable that would work in these browsers?
Thanks
That is because there is nothing with an id of app_frame. You have set the iframe's name to app_frame. Change your iframe's code to:
<iframe frameborder="0" name="app_frame" id="app_frame" src="site/apps.html" width="0%" height="100%" scrolling="no"></iframe>
An article pointing out this quirk in IE
MSDN's doc on getElementById states it returns names or id

set innerHTML of an iframe

In javascript, how can I set the innerHTML of an iframe? I mean: how to set, not get.
window["ifrm_name"].document.innerHTML= "<h1>Hi</h1>" does not work, and the same for other solutions.
Iframe and parent document are on the same domain.
I would need to set html of the whole document iframe, not its body.
I would need to avoid jquery solution.
A really simple example ...
<iframe id="fred" width="200" height="200"></iframe>
then the following Javascript is run, either inline, part of an event, etc ...
var s = document.getElementById('fred');
s.contentDocument.write("fred rules");
the "contentDocument" is the equivalent of the "document" you get in the main window, so you can make calls against this to set the body, head, any elements inside ... etc.
I've only tested this in IE8, Chrome and Firefox ... so you may want to test in IE6/7 if you have copies available.
In Firefox and Chrome (don't know about Opera), you can use the data: URI scheme.
<iframe src=".... data: URI data here ......">
JSFiddle example
Here is a tool to generate data:URI encoded data.
This does not work in IE:
For security reasons, data URIs are restricted to downloaded resources. Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.
If however as you say in the comment, getting/setting the document's body is enough, you are much easier off using one of the linked examples.
There is also the srcdoc attribute:
<iframe srcdoc="<p><h1>Hello</h1> world</p>"></iframe>
Demo, Polyfill.
In improving my file uploads in an AJAXS env I had the same need. This worked for me in ie8 and ff 22.0. Both the body innerhtml and div innerhtml work.
function copyframedata(data) {
var x = document.getElementById("photo_mgr_frame");
var y = x.contentWindow || x.contentDocument;
if (y.document) y = y.document;
y.getElementById('photo_mgr_mb').innerHTML = data;
}
got it from w3
I came across the same problem but here's an easy fix.
function Run(){
var txt = "<h1>Hello World</h1>";
var frame = document.getElementById('frame');
var frame = (frame.contentWindow || frame.contentDocument);
if (frame.document) frame = frame.document;
frame.open();
frame.write(txt);
frame.close();
}
<iframe id='frame'>
</iframe>
<button onclick='Run()'>Run</button>

Categories

Resources