I am getting very strange error on fetching height of page called from Iframe. I went throgh google and also checked other Stackoverflow post related to this 'Permission denied to access property document' but did not find any solution yet. I have a website which is pointing another server. And I am getting this error on Iframe. Let me provide the code
Jquery
$(document).ready(function()
{
// Set specific variable to represent all iframe tags.
var iFrames = document.getElementsByTagName('iframe');
// Resize heights.
function iResize()
{
// Iterate through all iframes in the page.
for (var i = 0, j = iFrames.length; i < j; i++)
{
// Set inline style to equal the body height of the iframed content.
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';
}
}
// Check if browser is Safari or Opera.
if ($.browser.safari || $.browser.opera)
{
// Start timer when loaded.
$('iframe').load(function()
{
setTimeout(iResize, 0);
}
);
// Safari and Opera need a kick-start.
for (var i = 0, j = iFrames.length; i < j; i++)
{
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
}
else
{
// For other good browsers.
$('iframe').load(function()
{
// Set inline style to equal the body height of the iframed content.
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
}
);
}
}
);
And IFrame
<iframe style="margin-bottom: 16px;" src="ourteamnav/first.php" frameborder="0" scrolling="no" width="597" height="240"></iframe>
I was getting 'Permission denied to access property document' error so the height is not coming according to the document height in it. Then I tried the following code
function resizeIframe(ifRef)
{
var ifDoc;
//alert(ifRef);
try
{
ifDoc = ifRef.contentWindow.document.documentElement;
}
catch( e )
{
try
{
ifDoc = ifRef.contentDocument.documentElement;
}
catch( ee ){}
}
var doc = ifRef.height;
//alert(doc);
if(ifDoc)
{
ifRef.height = 1;
ifRef.style.height = ifDoc.scrollHeight+'px';
}
}
And Iframe
<iframe onload="resizeIframe(this)" style="margin-bottom: 16px;" src="ourteamnav/first.php" frameborder="0" scrolling="no" width="597" height="240"></iframe`>
In this case I found no error on javascript but it did not work. But the strange thing both of them are working on my local server and also was working when the server where the code is present now was not pointing another.(Cross Site Scripting).
Please help me how to solve this.
references I used
error : Permission denied to access property 'document'
Error document.form is undefined in javascript
http://davidwalsh.name/iframe-permission-denied
https://sqa.stackexchange.com/questions/1453/how-to-fix-permission-denied-to-access-property-document
http://sahi.co.in/forums/discussion/2898/error-permission-denied-to-access-property-document-with-ckeditor/p1
http://www.codingforums.com/showthread.php?t=236484
This is called an XSS exception. The error: error : Permission denied to access property 'document'
Unfortunately, what you want to do -- manipulate the contents or window of an iframe on a site different from the domain of the parent -- is not allowed. Period.
Related
So I can't get the IFrame I have to properly resize to the contents of the page it's displaying. I'm on the latest version of chrome, and yes, I know others have made answers on how to do it, but no matter what I try nothing works. It either zooms in on the page (best try I've had yet tbh) or it just stays the same as if I've never changed anything.
I don't know S*** about javascript, so please help me out
I've already tried a ton of things, you name it, I've probably tried it.
<script type='text/javascript'>
$(function(){
var iFrames = $('iframe');
function iResize() {
for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
}
if ($.browser.safari || $.browser.opera) {
iFrames.load(function(){
setTimeout(iResize, 0);
});
for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
} else {
iFrames.load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
}
});
</script>
<iframe src="https://www.thundergaming.net/forums" class="iframe" scrolling="no" frameborder="0"></iframe>
Right now that just zooms in on the page, like it was resized, but the actual window stayed the same. I need the site and the actual IFrame to resize to the IFrames contents, making everything seemless as if you were actually on that page and not looking at an iframe.
I am trying to dynamically adjust the height of an iFrame on a web page depending on the content within the iFrame via some JavaScript.
My problem is when I have the script directly on the page in a <script> tag it works fine. When I stuff the code in to a separate js file and link to it- it doesn't work!
<iframe id='StatusModule' onload='FrameManager.registerFrame(this)' src='http://randomdomain.dk/StatusModule.aspx'></iframe>
<script type='text/javascript' src='http://randomdomain.dk/FrameManager.js'></script>
It gives me the error:
Uncaught ReferenceError: FrameManager is not defined
Can this really be true? Has it something to do with the page life cycle?
Ps. I guess the JavaScript code is irrelevant, as we not it works.
UPDATE: I think this might have something to do with secure http (https) and the different browsers in some weird way. I noticed that the script actually worked in Firefox. Or rather I'm not sure if its the script, or just Firefox's functionality that resizes iframes automatically depending on the content. It doesn't give me any error though.
If I then add https to the script url reference, the scripts work in IE and Chrome - but not in Firefox. Function reference error! This just got weird!
UPDATE #2: Its not a Firefox function that resizes the iframe. Its the actual script that works (without https).
UPDATE #3: The JavaScript. Works fine if I put it directly into a script tag.
var FrameManager = {
currentFrameId: '',
currentFrameHeight: 0,
lastFrameId: '',
lastFrameHeight: 0,
resizeTimerId: null,
init: function () {
if (FrameManager.resizeTimerId == null) {
FrameManager.resizeTimerId = window.setInterval(FrameManager.resizeFrames, 0);
}
},
resizeFrames: function () {
FrameManager.retrieveFrameIdAndHeight();
if ((FrameManager.currentFrameId != FrameManager.lastFrameId) || (FrameManager.currentFrameHeight != FrameManager.lastFrameHeight)) {
var iframe = document.getElementById(FrameManager.currentFrameId.toString());
if (iframe == null) return;
iframe.style.height = FrameManager.currentFrameHeight.toString() + "px";
FrameManager.lastFrameId = FrameManager.currentFrameId;
FrameManager.lastFrameHeight = FrameManager.currentFrameHeight;
window.location.hash = '';
}
},
retrieveFrameIdAndHeight: function () {
if (window.location.hash.length == 0) return;
var hashValue = window.location.hash.substring(1);
if ((hashValue == null) || (hashValue.length == 0)) return;
var pairs = hashValue.split('&');
if ((pairs != null) && (pairs.length > 0)) {
for (var i = 0; i < pairs.length; i++) {
var pair = pairs[i].split('=');
if ((pair != null) && (pair.length > 0)) {
if (pair[0] == 'frameId') {
if ((pair[1] != null) && (pair[1].length > 0)) {
FrameManager.currentFrameId = pair[1];
}
} else if (pair[0] == 'height') {
var height = parseInt(pair[1]);
if (!isNaN(height)) {
FrameManager.currentFrameHeight = height;
//FrameManager.currentFrameHeight += 5;
}
}
}
}
}
},
registerFrame: function (frame) {
var currentLocation = location.href;
var hashIndex = currentLocation.indexOf('#');
if (hashIndex > -1) {
currentLocation = currentLocation.substring(0, hashIndex);
}
frame.contentWindow.location = frame.src + '&frameId=' + frame.id + '#' + currentLocation;
}
};
window.setTimeout(FrameManager.init, 0);
UPDATE #4: Alright I did as ShadowWizard and TheZuck suggested:
<script type="text/javascript">
var iframe = document.createElement("iframe");
iframe.src = "http://www.randomdomain.dk/StatusWebModule.aspx";
iframe.width = '100%';
iframe.id = 'StatusModule';
iframe.scrolling = 'no';
if (iframe.attachEvent) {
iframe.attachEvent("onload", function () {
FrameManager.registerFrame(iframe);
});
} else {
iframe.onload = function () {
FrameManager.registerFrame(iframe);
};
}
document.getElementById('framecontainer').appendChild(iframe);
</script>
With HTTP as URL its work on IE and Firefox - not Chrome. If I set it to HTTPS it works on Chrome and IE - Not Firefox. Same error:
"ReferenceError: FrameManager is not defined".
What is going on here?
a couple of things:
I would bet on a race condition when you have two independent
resources which are supposed to be loaded concurrently. You can
easily check this by writing to log (or to document, whichever works
for you) when both finish loading (i.e. add a little script in the
iframe to dynamically add the time to the content or write to log if
you're using chrome, do that in the external script file as well,
and see if they post the time in a specific order when this fails). In your case, if the script appears before the iframe, and you don't mark it as async, it should be loaded before the iframe is fetched, so it would seem strange for the iframe not to find it due to a race condition. I would bet on (3) in that case.
Assuming there is such an issue (and if there isn't now, when you go
out into the real world it will be), a better way to do this is to
make sure both behave well in case the other loads first. In your
case, I would tell the iframe to add itself to a local variable
independent of the script, and would tell the script to check if the
iframe registered when it loads, and after that in recurring
intervals until it finds the iframe.
If the page the script is loaded into is not in the same domain
as the iframe (note that it doesn't matter where the script comes
from, it only matters what the page's domain is), (or even the same
protocol as someone mentioned here), you will not be able to access
the content so you won't be able to resize according to what the
content is. I'm not sure about the onload method, if it's considered part of the wrapping page or part of the internal iframe.
Check out this question, it sounds relevant to your case:
There's also an interesting article here about this.
I think that your frame is loaded before the script, so "FrameManager" does not exist yet when the iframe has finished loading.
Basically, im making a javascript to refresh a page and it will find the price and buy the item when it goes up for the price desired.
I got it to work without the iframe, but I need to to work in the iframe, which is the problem ive reached.
If you went to this page: [ http://m.roblox.com/items/100933289/privatesales ]
and ran this code:
alert(document.getElementsByClassName('currency-robux')[0].innerHTML);
You would get an alert for the lowest price. In the code, this doesnt work (Hence, my problem.)
Try running the code below on this page to get it to work [ http://www.roblox.com/Junk-Bot-item?id=100933289 ]
var filePath = document.URL;
var itemid = filePath.slice(((filePath.search("="))+1));
var mobileRoot = 'http://m.roblox.com/items/';
var mobileEnd = '/privatesales';
var mobileFilePath = mobileRoot+itemid+mobileEnd;
var iframe2 = '<iframe id="frame" width="100%" height="1" scrolling="yes"></iframe>';
document.write(iframe2);
var iframe = parent.document.getElementById("frame");
iframe.height = 300;
iframe.width = 500;
iframe.src = mobileFilePath;
var price;
var snipe = false;
var lp = Number(prompt("Snipe Price?"));
document.title = "Sniping";
function takeOutCommas(s){
var str = s;
while ((str.indexOf(",")) !== -1){
str = str.replace(",","");
}
return str;
}
function load() {
if (snipe == false) {
tgs = iframe.contentDocument.getElementsByClassName('currency-robux');
price = Number((takeOutCommas(tgs[0].innerHTML)));
alert(price);
}
}
iframe.onload = load;
You might try having both pages — the one from "m.roblox.com" and the one from "www.roblox.com" — add the following up at the top of the head:
<script>
document.domain = "roblox.com";
</script>
Code from the different domains won't be allowed to look at each others page contents, but if you set the domains to the same suffix then it should work.
If you can't get it to work by sharing the same document.domain="roblox.com" code then you can try posting messages to the iframe.
Put this inside the iframe page:
window.addEventListener('message',function(e) {
});
In the parent page execute this to pass a message (can be a string or object, anything really) to the iframe:
document.getElementById("frame").contentWindow.postMessage({ "json_example": true }, "*");
Put this in the parent to listen for the message:
window.addEventListener("message", messageReceived, false);
function messageReceived(e) {
}
From inside the iframe posting a message back out:
window.parent.postMessage('Hello Parent Page','*');
I have a webpage with iframes.
These iframes are for showing some external website data.
But problem arise when those external servers get blocked in a network it gives a error that "The proxy server is refusing connections".
It does not look good to me.
I want to hide all these blocked iframes or want to show some alternate data there.
It's not possible to check whether a page has not loaded. However, it's possible to use onload event handlers.
It's important to not rely on JQuery, because JQuery is also an external source which has to be loaded. Add this code within <script> tags after the last IFRAME element (often, at the end of the body). Code:
//Cannot rely on JQuery, as it has to be loaded
(function(){//Anonymous wrapper.
var iframes = document.getElementsByTagName("iframe");
var num_frames = iframes.length;
//Function to add Event handlers
var addLoad = window.addEventListener ? function(elem, func){
elem.addEventListener("load", func, true);
} : window.attachEvent ? function(elem, func){
elem.attachEvent("onload", func);
} : function(elem, func){
elem.onload = func;
};
var success_load = 0;
for(var i=0; i<num_frames; i++){
addLoad(iframes[i], function(){
this.dataSuccessfullyLoaded = true;
success_load++;
});
}
addLoad(window, function(){
if(success_load < num_frames){
for(var i=num_frames-1; i>=0; i--){
if(!iframes[i].dataSuccessfullyLoaded){
iframes[i].parentNode.removeChild(iframes[i]);
//Or: iframes[i].style.display = "none";
}
}
}
});
})();
Fiddle: http://jsfiddle.net/3vnrg/
EDIT
Your proxy seems to send HTTP pages with status code 200. Another option is to include the CSS file, and check whether a CSS variable exists or not:
/*From http://static.ak.fbcdn.net/rsrc.php/v1/yb/r/CeiiYqUQjle.css*/
#facebook .hidden_elem{display:none !important}
#facebook .invisible_elem{visibility:hidden}
HTML:
<link rel="Stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/v1/yb/r/CeiiYqUQjle.css" />
<div id="facebook"><div class="hidden_elem invisible_elem"></div></div>
JavaScript (execute this code after all resources have been loaded):
if($("#facebook div").css("display") != "none" || $("#facebook div").css("visibility") != "hidden") disableFBFrame();
// Where disableFBFrame(); is a function which hides the frame.
This is really two questions one leading into the other. Firstly what does 'Permission denied to access property 'href' from a non-chrome context' actually mean?
Secondly I am using overlays in OpenLayers and wish to change the opacity of said layers, this is where this error is being thrown the code of which is here...
<input id='opacity' value="1.0" onChange="changeOpacity()">
Of which changeOpacity() is the following function...
function changeOpacity() {
var newOpacity = parseFloat(OpenLayers.Util.getElement('opacity').value);
newOpacity = Math.min(1.0, Math.max(0.1, newOpacity));
OpenLayers.Util.getElement('opacity').value = newOpacity;
for (var i=0; i<images.length; i++) {
layers[images[i]].setOpacity(newOpacity);
}
}
which throws the error at "var href = originalElement.href;" here...
function mD(e) {
//what is originalElement/srcElement/originalTarget?
var originalElement = e.srcElement || e.originalTarget;
var href = originalElement.href;
if (originalElement.nodeName == "A" && href.match("http://www.openstreetmap.org/browse/")) {
href = href.replace('http://www.openstreetmap.org/browse/','http://www.openstreetmap.org/api/0.6/');
if (gml) { map.removeLayer(gml); } //$("status").innerHTML = 'loading'; }
gml = new OpenLayers.Layer.GML("OSM", href, {format: OpenLayers.Format.OSM});
map.addLayer(gml);
gml.preFeatureInsert = style_osm_feature;
var sf = new OpenLayers.Control.SelectFeature(gml, {'onSelect': on_feature_hover});
map.addControl(sf);
sf.activate();
return false;
}
}
Any help/ideas is great appreciated! I am using firefox 3.5.9 and firebug 1.5.4
I've noticed the "Permission denied.." errors often only appear when FireBug is activated. If you disable FireBug these errors never occur.
For layer opacity consider using the GeoExtJS framework on top of OpenLayers. It has a opacity slider widget:
http://www.geoext.org/lib/GeoExt/widgets/LayerOpacitySlider.html