I am having problems passing javascript values between frames in chrome. In other browsers (Opera and Firefox) it works. The first frame contains the following html:
<script> variable="frame 1 value";</script>
click here
and test.html is:
<html>
<head>
<script>window.onload = function() {
div = document.getElementById("fred");
div.innerHTML="<b>" + top.frames[0].variable + "</b>";
}
</script>
</head>
<body>
<div id="fred">
hi there</div>
</body>
</html>
I have looked on this site and others, and the have seen a suggestion that because chrome pages run in different processes they cannot pass values. Is this true, and if so is there a way around it (cookies?)
Thanks,
russell
(edited) I just found another answer which says this happens only on file protocol. Like the writer of the other question, I am writing an applicaiton meant to be run off a cd, so I need to use file protocol. The version of Chrome I am using is 9.0.
ry
This has something to do with cross-site scripting which may be a security issue. Since Chrome has a very strict behavior on this, it should be impossible to achieve what you want.
Fortunately, there may be a nifty trick that you can use (if your variable is only a string):
Change the link in the first frame to test.html?foo=bar
Read window.location.href in the second frame. This will yield something like "Z:\folder\test.html?foo=bar". Now you can use string manipulation functions to extract the value of foo (in case: bar) from the href.
HTML5 Storage to the rescue! For the first frame:
<script>localStorage.setItem('variable', 'frame 1 value');</script>
click here
And for test.html:
<html><head>
<script>
window.onload = function() {
div = document.getElementById("fred");
div.innerHTML="<b>" + localStorage.getItem('variable') + "</b>";
}
</script>
</head><body>
<div id="fred">hi there</div>
</body></html>
A note of caution: IE7 and some older browsers do not support localStorage. However, you should be able to use if (typeof(localStorage) == 'undefined') {} to detect which method you need to use.
Frames are deprecated since 1997 (HTML 4.0 specification) for many reasons - so the best recommendation is do not use them.
You can also run Chrome with command line argument --disable-web-security, but it is also bad recommendation.
Related
I am trying to get the targeted element with the pseudo-class :target after document load.
I created the following example to illustrate the problem.
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded",function(){
console.log(document.querySelector(":target"));
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
If I load test.html, then the console outputs :
null
If I load test.html#test on Chrome and Opera, then the console outputs :
null
If I load test.html#test on Firefox and IE11, then the console outputs :
<div id="test"></div>
My questions are :
Which browsers have the correct behaviour ?
Does DOMContentLoaded is the correct event to call querySelector(":target") ?
Is there another way to get targeted element after document load ?
PS : I succeeded to fix the problem on Chrome and Opera thanks to setTimeout but It is not a good solution. Does someone has a better idea ?
EDIT : I found a similar issue with JQuery Selecting :target on document.ready()
This is a known issue with WebKit- and Blink-based browsers that has never been directly addressed. The workaround suggested by web-platform-tests is to request an animation frame, which only happens after page rendering, at which point the :target pseudo seems to match successfully:
async_test(function() {
var frame = document.createElement("iframe");
var self = this;
frame.onload = function() {
// :target doesn't work before a page rendering on some browsers. We run
// tests after an animation frame because it may be later than the first
// page rendering.
requestAnimationFrame(self.step_func_done(init.bind(self, frame)));
};
frame.src = "ParentNode-querySelector-All-content.xht#target";
document.body.appendChild(frame);
})
My testing shows that simply using onload works fine, but the author may be on to something and besides, a single call to requestAnimationFrame() costs practically nothing, so you may as well follow suit.
The following test uses onload (as opposed to DOMContentLoaded, which fires immediately after the DOM tree has been constructed but not necessarily rendered):
data:text/html,<!DOCTYPE html><script>window.onload=function(){console.log(document.querySelector(":target"));};</script><div id="test"></div>#test
The following test uses requestAnimationFrame() in conjunction with onload:
data:text/html,<!DOCTYPE html><script>window.onload=requestAnimationFrame(function(){console.log(document.querySelector(":target"));});</script><div id="test"></div>#test
It looks like Firefox has the ideal behaviour, though maybe not the correct one.
Nevertheless, as an alternative, you can use:
document.addEventListener('DOMContentLoaded', () => document.querySelector(window.location.hash));
and that will work in all browsers.
I'm trying what should have been a simple operation: when a user clicks a link a modal window pops up that's populated with some appropriate data in a string. Here's the HTML for the window:
<!DOCTYPE HTML>
<html>
<head>
<title>Modal Display Window</title>
</head>
<body>
<div id="modal_display_block">REPLACE THIS</div>
</body>
</html>
And this is the Javascript function that calls and populates the window:
function displayCenterBlock(data) {
DispWin = window.open("modal_window.html", "", 'toolbar=no,status=no,width=300,height=300');
DispWin.onload = function() {
DispWin.document.getElementById('modal_display_block').innerHTML = data;
}
}
This works great in every browser I've tried except Internet Explorer. In IE the innerHTML does not get rewritten by the data. Is there some IE-specific trick or tweak I need to apply to get this working in that browser?
Many thanks in advance!
ON EDIT: I've discovered that if I move the element rewrite line out of the onload function it then works fine in IE but not in other browsers. It appears my options are to use some conditional code to rewrite at once for IE and to wait for page load for all other browsers, or to abandon the rewrite element approach and just use a document.write. I get from forum searches people like to discourage document.write but that's looking pretty appealing right now.
Okay, for better or worse this code achieves the goal and appears to work cross browser, even in IE.
DispWin = window.open("", "Display", 'toolbar=no,status=no,width=300,height=300');
DispWin.document.open();
DispWin.document.write(data);
DispWin.document.close();
DispWin.focus();
I get that document.write can re-write the whole page, and that is sometimes bad, but in this case that is exactly what I want: a single small page displaying only what was passed in the data argument. I can style it inline.
I need to create a javascript application that can display the content from another domain (admittedly another big website). Further interpretation of the DOM tree is not needed at the moment. It will be used by only ten more people.
I can make it work via php's get_content function. But that is very slow since it runs on the server side. I looked into any origin but cannot get it to work. It is best to not touch any origin since we use it extensively and we don't have much cash to spend around. Can anyone help? By the way, iframe is not an option since the big website blocked it. The code is below. Admittedly I kind of took it from another stackoverflow answer. Thank you in advance!
Btw. another engineer told me if I use the extension .hta instead of html, the same-origin policy issue would be resolved. I tried it and it did not work. But I was wondering if I did it right.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function myCallbackFunction(myData) {
$(function() {
$("#test").contents().find('html').html(myData.contents);
});
}
</script>
<script src="http://anyorigin.com/get?url=http://http://www.amazon.com/dp/B001F7SGHQ/&callback=myCallbackFunction"></script>
</head>
<body>
</body>
<iframe id='test' style='width: 100%; height: 100%'>
</html>
Try something like the following.
var invocation = new XMLHttpRequest();
var url = 'http://http://www.amazon.com/dp/B001F7SGHQ/&callback=myCallbackFunction';
function callOtherDomain() {
if(invocation) {
invocation.open('GET', url, true);
invocation.withCredentials = true;
invocation.onreadystatechange = handler;
invocation.send();
}
}
Addition of [withCredentials = true] will enable the HTTP header "Access-Control-Allow-Origin:".
there's another good solution might be what you need via PHP ,
is to use class called PHP
Simple HTML DOM Parser
this class can copy all source of a websites and you can save it in your server with extension you want also you can modified what you need before you save and this class have a full documentation (You need to be good in PHP5 POO )
this a link for class
http://simplehtmldom.sourceforge.net/
and there a good advanced thing you can do it for make your website faster , is use a Cash System so you can download the source from website one time a Day or 1H or 12 Hours ,
and save it in your host .
i hope that will give you what you need .
I'm working with a legacy frames website that was just moved into an iFrame.
Assuming I have the following function:
<script language = "javascript">
function myFunction(){
<!-- no console.log in IE 7 (my required target browser) -->
alert('sup, yo?');
}
</script>
and the following hyperlink triggering the function:
click me
before the move into an iFrame this worked ok. Once the website was moved into the iframe, clicking the link in IE (not FF or Chrome), I would get the ever-so-helpful error:
Line: 1
Object expected
Once I removed the target="_top" attribute the function would work, so I don't need help solving the problem, but my question is:
What is IE doing with the target attribute when calling a javascript function to invoke this behavior? I don't have other versions of IE installed, is this current behavior in 8+ as well?
Thanks.
It does not make sense to try to understand the behavior. You're using a technique that is not well defined and is not used by developers nowadays.
Instead of href="javascript:myFunction();, just use onclick="myFunction(); return false" or even better, set the handler from JS like the following
<a href="pageForUsersWithoutJs.html" id="my-link" >click me</a>
<script type="text/javascript">
// This is old school, but works for all browsers, you should use a library instead
document.getElementById('my-link').onclick = function() {
// Do your thing
return false; // so the link isn't followed
};
</script>
How can I hide a div with javascript if the browser is firefox only?
To check Firefox browser
//Javascript
var FIREFOX = /Firefox/i.test(navigator.userAgent);
if (FIREFOX) {
document.getElementById("divId").style.display="none";
}
<!-- HTML-->
<div id="divId" />
Just check a FF-specific JavaScript property. E.g.
var FF = (document.getBoxObjectFor != null || window.mozInnerScreenX != null);
if (FF) {
document.getElementById("divId").style.display = 'none';
}
This is called feature detection which is preferred above useragent detection. Even the jQuery $.browser API (of which you'd have used if ($.browser.mozilla) for) recommends to avoid useragent detection.
“Is the browser Firefox” is almost always the wrong question. Sure, you can start grovelling through the User-Agent string, but it's so often misleading that it's not worth touching except as a very very last resort.
It's also a woolly question, as there are many browsers that are not Firefox, but are based around the same code so are effectively the same. Is SeaMonkey Firefox? Is Flock Firefox? Is Fennec Firefox? Is Iceweasel Firefox? Is Firebird (or Phoenix!) Firefox? Is Minefield Firefox?
The better route is to determine exactly why you want to treat Firefox differently, and feature-sniff for that one thing. For example, if you want to circumvent a bug in Gecko, you could try to trigger that bug and detect the wrong response from script.
If that's not possible for some reason, a general way to sniff for the Gecko renderer would be to check for the existence of a Mozilla-only property. For example:
if ('MozBinding' in document.body.style) {
document.getElementById('hellononfirefoxers').style.display= 'none';
}
edit: if you need to do the test in <head>, before the body or target div are in the document, you could do something like:
<style type="text/css">
html.firefox #somediv { display: none }
</style>
<script type="text/javascript">
if ('MozBinding' in document.documentElement.style) {
document.documentElement.className= 'firefox';
}
</script>
if(document.body.style.MozTransform!=undefined) //firefox only
function detectBrowser(){
....
}
hDiv = .... //getElementById or etc..
if (detectBrowser() === "firefox"){
hDiv.style.display = "none"
}
You might try Rafeal Lima's CSS Browser Selector script. It adds a few classes to the HTML element for OS, browser, js support, etc. You can then use these classes as hooks for further CSS and/or JS. You might write a CSS (or jQuery) selector like html.gecko div.hide-firefox once the script has run.