<base> href not working in Firefox for <iframe> - javascript

I have a website that minimally looks like the following:
<html>
<body>
<iframe id="a"></iframe>
</body>
</html>
And javascript that at some point does something like this:
$('#a').attr('srcdoc', '
<html>
<head>
<base href="https://example.com/" target="_blank">
</head>
<body>
Foo
</body>
</html>');
The link works fine in Chrome and IE, that is, it goes to https://example.com/some_relative_link, but in Firefox, the href attribute of the base element doesn't do anything and it just tries to access the link as if it were local to the outer site.
Is this a known issue? Design feature? Bug? Any help would be appreciated.
JSFiddle: https://jsfiddle.net/4c0zjctx/

Apparently this is a known bug. It should be fixed in Firefox 46.

Related

Chrome 75 - setting iFrame src attribute causes iFrame parent to load the iFrame content

Chrome v75 appears to have introduced a bug whereby if you replace an iFrame's src programatically, it will replace the entire page instead of the iFrame.
This didn't happen on v74 and I can't get a test case to work (yet), it just fails in our site. (The site hasn't changed since going from v74 to v75, only Chrome has changed)
It appears to work fine the first time but then when you change it again (in our case viewing report drill downs) it causes the entire page (i.e. the iFrame's Parent) to load the src you were trying to load into the iFrame.
It also doesn't matter if you use pure Javascript or (in our case) JQuery, both cause the same issue.
EDIT: After a few hours detective work, I've found the bug. Setting the tag in the iFrame's content causes Chrome to load the iFrame's content into it's parent rather than the iFrame itself.
I've setup a Plunker account with a demo: https://plnkr.co/edit/UQ0gBY?plnkr=legacy&p=info
Just so I can post the link to Plunker, here is the code for the main file & the iframe content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onLoaded() {
// find element
let button = document.getElementById("button");
button.addEventListener("click",function(e){
// Add a random number on the end as a cache buster
document.getElementById('frame-finance-custom').src = 'test2.html?rnd=' + Math.random();
},false);
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
</head>
<body>
<div>IFrame Src Changing Test</div>
<div>
<div id="div-frame-finance-custom" style="float:left;width:33%">
<iframe id="frame-finance-custom" name="frame-finance-custom" class="iframe"
style="border:1px solid black; width: 100%; height: 350px; overflow-y: scroll; vertical-align: top;">
no data
</iframe>
</div>
<div style="float:left;margin-left:1em;">
Detail: Loading an iframe page with a <Base> tag in it with target set to "_parent" will cause any refresh of that frame to replace the parent document<BR>
<BR>Instruction: <UL><LI>Click the 'Update Frame' Button, this will load test2.html into the frame. <LI>Click it again & it will replace the iframe's parent with the content of the iFrame.</UL>
<BR>Confirmation: Remove the <Base> tag from the header of test2.html & reload, it will work as expected.
</div>
</div>
<br clear=both>
<div>
<button id="button">
Update Frame
</button>
</div>
</body>
</html>
IFrame Content (test2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_parent"/>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>This is the frame content</div>
</body>
</html>
Note, using their new layout it doesn't work, but using their legacy layout it does. Feel free to save the files locally and use chrome directly too.
Ok, so this turned out to be a bug in Chrome rather than anything else, so yes, strictly not a SO question, but seeing as SO ranks so well in Google (other search engines are available), I thought it better to leave it here as a solution rather than simply delete it, just incase anyone else has a similar problem.
The reason is outlined as an edit in my question, the solution is to remove the <base target="_parent"> tag from the iFrame and programatically add the 'target="_parent"' attribute to any links in the iFrame.
We do this via jQuery, I'm sure its just as easy via vanilla Javascript.
$('a').attr('target','_parent');
Add that to the javascript that runs when a page has loaded and it'll replace add target="_parent" to any links on the page.
e.g.
<script>
function onLoaded() {
// find all links and add the target attribute
$('a').attr('target','_parent');
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
As #Kaiido says in his comment, its apparently fixed in Chrome v77, but this isn't the current (as of June 2019) stable release, so we've had to add the workaround into production so that our CRM works with Chrome v75. Thanks to #Kaiido for confirming that.

jcors-loader.js not working in IE7

Index.html
<html>
<head>
<script type="text/javascript" src="/js/jcors-loader.js"></script>
<script>
JcorsLoader.load(
"js/jquery-1.8.0.js",
"/js/alertme.js",
function() {
$("#result").text("TEST OK");
}
);
</script>
</head>
<body>
<h1 id="result"></h1>
</body>
</html>
alertme.js
alert("Loaded");
This works fine in chrome and firefox it displays "TEST OK" and popup...But no message or alert in IE(7,8,9)...Any help will be appreciated.
I wrote that library, remember these three tips to use it.
Not invoke a script add the inline content.
Put the script tag after the .
IE7 works but blocks onload.
First thing to check is that you're not using console.log anywhere in your javascript as this can cause funny issues with IE.
The next thing to do is check the documentation on the library you're using as it may not be compatible with IE 9 and below (have you tried it with IE 10?)

Meta Tag refresh not working in chrome

Below is my code .. In IE and Firefox it works fine .. i.e after 10seconds it gets redirected to www.google.com .. but the same code doesn't work in Chrome
<html>
<head>
<title>App- Log In</title>
<meta http-equiv="refresh" content="10; url=http://www.google.com">
<script language="JavaScript">
function noBack(){window.history.forward()}
noBack();
window.onload=noBack;
window.onpageshow=function(evt){if(evt.persisted)noBack()}
window.onunload=function(){void(0)}
</script>
</head>
<body>
Testing
</body>
</html>
Your problem is this line:
window.history.forward()
Whenever this line has executed, the meta-refresh disables in Chrome.
My recommendation would be not to try to disable the back button since it isn't working reliably, and from what I gather it can't be done.

Loading local files via jQuery

Spent 3 hours reading reference, but still no effect, so asking here.
OS: Windows 7 (is it relevant?)
Browser: Opera 11.51
jQuery: 1.6.2
Two files on a local machine, main.html and menu.html in the same folder.
main.html:
<html>
<head>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// append contents
$('#menu').load('menu.html');
});
</script>
</head>
<body>
<table>
<tr>
<td id="menu"></td>
</tr>
</table>
</body>
</html>
menu.html:
<html>
<head></head>
<body>
menu tree
</body>
</html>
As I guess, when I open main.html, there should be one table with one cell containing "menu tree" string. And it works, for example, in IE. But Opera doesn't show any result.
I debugged the stuff with optional callback for load(), it shows that result status for load() is "error".
What am I doing wrong?
In Opera you must set the flag Allow File XMLHttpRequest (opera:cofig - User Prefs).
In Google Chrome you must use option parameter --allow-file-access-from-files for run browser, for example: "C:\Documents and Settings\User\Local Settings\Application Data\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
You probably want to get rid of the <body>, <head> and <html> tags in the Menu.html.
The way you're doing it now is invalid HTML because there is only one <body>, <head>, and <html> tag allowed in a document.
Change Menu.Html to
<p>
Menu
</p>
Try that!

DOM when not an actual document

Ok, lets say I go to http://www.google.com/intl/en_ALL/images/logo.gif , which is not really a document, but an image, iin my browser. Does it still have a document object? Can I use javascript: in my location bar? Wha'ts the deal with this? Thanks.
A quick look with Firebug reveals that yes indeed, there is a DOM and a document object. For example, javascript:alert(document.title) in the location bar gives "logo.gif (GIF Image, 276x110 pixels)". This results from the construction of the following document by the browser:
<html>
<head>
<title>logo.gif (GIF Image, 276x110 pixels)</title>
</head>
<body>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="http://www.google.com/intl/en_ALL/images/logo.gif"/>
</body>
</html>
This is also true in Chrome (with a slightly different string for the title); the HTML is
<html>
<body style="margin: 0px;">
<img style="-webkit-user-select: none" src="http://www.google.com/intl/en_ALL/images/logo.gif">
</body>
</html>
In IE, it appears that document.title is empty, but javascript:alert(document.body.clientWidth) gives a result equal to the client area of the browser, so it looks like there's a DOM there as well. The HTML is as follows:
<html>
<head>
<title></title>
</head>
<body>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" complete="complete"/>
</body>
</html>
It depends on the browser. If you go to that URL in firefox, for example, and open the DOM Inspector, you will see an html, body and img tag; also, typing javascript:alert(document) in the location bar will alert [object ImageDocument]. IE8 exhibits similar behaviour (but alerts just [object]).
no... the browser simply acts as a picture viewer

Categories

Resources