Rectangle 27 2

If you can control the source file that is loaded inside the iFrame (http://wifi.tucado.com/ads/001.html), try adding a target="_top" or target="_blank" in the links there.

great work :) I didn't thought about this. works perfectly well. thanks

target frame in iframe (target="_blank" not working) - Stack Overflow

iframe frameset-iframe
Rectangle 27 1

Due this map is loaded inside an iFrame, it's not possible to run any javascript event listeners on the links, neither is it possible to change the html.

javascript - Make links inside an iframe open in a new window - Stack ...

javascript jquery html css iframe
Rectangle 27 1

Due this map is loaded inside an iFrame, it's not possible to run any javascript event listeners on the links, neither is it possible to change the html.

javascript - Make links inside an iframe open in a new window - Stack ...

javascript jquery html css iframe
Rectangle 27 1

No, this is impossible to determine. The child document cannot cross its security boundaries, and if the domain is different and no other CORS permissions are in place its 'visible world' is limited to the scope of its own document, ie its own window. There is no way to look beyond that into the parent document's scope, and determine the type of the containing element. Doing so would expose the entire object and its attributes, including all potential exploits of that knowledge.

javascript - How to identify a webpage is loaded inside an IFRAME or a...

javascript iframe frame
Rectangle 27 2

I'm guessing you're using manifest_version: 2. If so, you'll need to use addEventListener instead of your inline onload handler:

window.onload = function() {
    //attach a load listener to the iframe
    document.querySelector("iframe").addEventListener("load", frame_loaded);
    document.forms["getPage"].submit();
}

Thanks a lot! It worked!

Modify the popup in chrome extension once iframe is loaded inside it -...

google-chrome google-chrome-extension
Rectangle 27 1

You have to wait until the iframe has loaded and then access the elements inside of it:

$('<iframe ... />').load(function() {
    var doc = $(this).contents();
    doc.find('#yourLink').click(...);
}).appendTo('body');
.contents

Not sure how Chrome handles this for extensions, but it could be that you will have a same-origin policy problem.

javascript - how to inject an iframe panel to a Google Chrome extensio...

javascript iframe google-chrome-extension
Rectangle 27 1

You have to wait until the iframe has loaded and then access the elements inside of it:

$('<iframe ... />').load(function() {
    var doc = $(this).contents();
    doc.find('#yourLink').click(...);
}).appendTo('body');
.contents

Not sure how Chrome handles this for extensions, but it could be that you will have a same-origin policy problem.

javascript - how to inject an iframe panel to a Google Chrome extensio...

javascript iframe google-chrome-extension
Rectangle 27 5

You don't need jquery inside the iframe to do this, but I use it cause the code is so much simpler...

Put this in the document inside your iframe.

$(document).ready(function() {
  parent.set_size(this.body.offsetHeight + 5 + "px");  
});

added five above to eliminate scrollbar on small windows, it's never perfect on size.

function set_size(ht)
{
$("#iframeId").css('height',ht);
}

Please note that this will not work for cross-domain iframes

This also won't work if you are displaying a PDF within the iframe.

not work in ie11 , firefox40

jquery get height of iframe content when loaded - Stack Overflow

jquery iframe height onload
Rectangle 27 1

This is a bit of a hack, but you could try loading the gif into an iframe and calling window.stop() from inside the iframe (on itself) once the image has loaded. This prevents the rest of the page from stopping.

Would you mind to give me a code example. I couldn't get it working with your method + see the update

calling window.stop() from inside the iframe will also stop the original window from being executed or how you would do this exactly?

javascript - Stopping GIF Animation Programmatically - Stack Overflow

javascript html animated-gif
Rectangle 27 53

It's ideal if you can get the iframe to tell you itself from a script inside the frame. For example it could call a parent function directly to tell it it's ready. Care is always required with cross-frame code execution as things can happen in an order you don't expect. Another alternative is to set var isready= true; in its own scope, and have the parent script sniff for contentWindow.isready (and add the onload handler if not).

If for some reason it's not practical to have the iframe document co-operate, you've got the traditional load-race problem, namely that even if the elements are right next to each other:

<img id="x" ... />
<script type="text/javascript">
    document.getElementById('x').onload= function() {
        ...
    };
</script>

there is no guarantee that the item won't already have loaded by the time the script executes.

The ways out of load-races are:

Inline onsomething handlers in HTML are almost always the wrong thing and to be avoided, but in this case sometimes it's the least bad option.

Thanks. My solution checks the readyState (if exists), then the body elements innerHTML length to see if it has loaded. If not, attaches the load event handler. Seems to work ok

-1 - inline events are not "bad", that's just the current fad. In fact, inline events are easier to debug and understand, unlike their magic counterparts (which, on the other hand, are easier to attach, stack and use seamlessly).

@Christian, inline events are also the best option when you need to attach an event to every element of a very long list. Since you're already looping to build the list on the server side, it's much more efficient to attach the inline-event as well.

@haknick Wouldn't you want to use a single event listener on the list, and use an event delegate? This would be more efficient.

This would not work if the iframe is cross-domain. The script inside iframe cannot access parent window.

javascript - Detecting when Iframe content has loaded (Cross browser) ...

javascript events cross-browser
Rectangle 27 9

As it would turn out, the easiest way to do this is to post to the target url inside of an iframe. Same origin policy on most browsers allows you to perform an HTTP POST from one domain to another unrelated domain. I solved the problem by adding an iframe to my page, initially set to a local bootstrapping page. Since that page was loaded from the same domain, I am able to control it via script. I used that to post the form to my target site, and polled the results to determine if my call was successful. It's not elegant, but it works.

javascript - Cross-Origin resource sharing and file:// - Stack Overflo...

javascript ajax json html5 jsonp
Rectangle 27 1

Your problem is that code inside your storyline_compiled.js file is attemping to access the DOM of the parent page of the IFRAME it's loaded in despite being loaded from a different domain, specifically with the following line:

if(self!=top){var meta=$('<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>');top.document.getElementsByTagName("head")[0].appendChild(meta.get(0))}

More specifically, the offending JS call is:

top.document.getElementsByTagName

This issue is due to the fact that JS loaded from a different domain is attempting to modify the page it's embedded in, violating the XSS protection characteristics of most browsers.

One option you have is to remove that line of code from the JS file itself, and then simply add the tag it's trying to create into the head section of your page that's embedding the IFRAME. ie just add the following to your html5test.html file:

<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

amazon s3 - Unable to access contents from cross bucket (CORS ENABLED)...

amazon-s3 cors
Rectangle 27 11

Security features built into all browsers ensure that Javascript cannot interact with objects in other windows and/or frames if those Windows or frames were loaded from a different site. This is commonly known as the "same origin policy". Whether something was loaded from a different site is determined by the hostname part of the URL. If for example the outer frame is loaded from http://yoursite.com and the inner frame is loaded from http://example.com then Javascript running in the scope of the outer frame will not be able to access or modify any properties or objects within the scope of the inner frame.

In this case the specific error is indicating that your Javascript, which is running in the context of the outer frame, is denied from accessing an object (contentDocument) whose scope is the inner frame. Hidden somewhere in the jQuery you are trying to use will be an implicit access to the frame's document element (as accessed by the contentDocument property of that iframe).

You may be able to work around this by destroying the iframe and re-creating a new iframe with the desired src.

javascript - Changing src of iframe inside iframe - Stack Overflow

javascript jquery html iframe
Rectangle 27 786

Browsers can block access to window.top due to same origin policy. IE bugs also take place. Here's the working code:

function inIframe () {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

top and self are both window objects (along with parent), so you're seeing if your window is the top window.

This seems to work fine in Firefox. Does it work in other browsers too?

Having a page with an iframe within an iframe, to test from my child iframe if my parent iframe was embeded in the page, I used if (parent === top)

@sglessard If the child page and parent are from different domains then Firefox will complain for Same Origin Policy (www.w3.org/Security/wiki/Same_Origin_Policy) and code won't work

This method is not working with IE

This works in IE 11, 10, and 9 for me. Also it works in FF and Opera as well as, of course, Chrome. I haven't run into any issues with it.

javascript - How to identify if a webpage is being loaded inside an if...

javascript facebook iframe
Rectangle 27 780

Browsers can block access to window.top due to same origin policy. IE bugs also take place. Here's the working code:

function inIframe () {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

top and self are both window objects (along with parent), so you're seeing if your window is the top window.

This seems to work fine in Firefox. Does it work in other browsers too?

Having a page with an iframe within an iframe, to test from my child iframe if my parent iframe was embeded in the page, I used if (parent === top)

@sglessard If the child page and parent are from different domains then Firefox will complain for Same Origin Policy (www.w3.org/Security/wiki/Same_Origin_Policy) and code won't work

This method is not working with IE

This works in IE 11, 10, and 9 for me. Also it works in FF and Opera as well as, of course, Chrome. I haven't run into any issues with it.

javascript - How to identify if a webpage is being loaded inside an if...

javascript facebook iframe
Rectangle 27 780

Browsers can block access to window.top due to same origin policy. IE bugs also take place. Here's the working code:

function inIframe () {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

top and self are both window objects (along with parent), so you're seeing if your window is the top window.

This seems to work fine in Firefox. Does it work in other browsers too?

Having a page with an iframe within an iframe, to test from my child iframe if my parent iframe was embeded in the page, I used if (parent === top)

@sglessard If the child page and parent are from different domains then Firefox will complain for Same Origin Policy (www.w3.org/Security/wiki/Same_Origin_Policy) and code won't work

This method is not working with IE

This works in IE 11, 10, and 9 for me. Also it works in FF and Opera as well as, of course, Chrome. I haven't run into any issues with it.

javascript - How to identify if a webpage is being loaded inside an if...

javascript facebook iframe
Rectangle 27 1

Ok, so the 'answer' to my question is this: the Galleria plugin script that converts the list of images into a gallery is loaded and executed when DOM is ready on the container page (the page with UI tabs, where the iframe that contains the Galleria page is initially hidden). Because the iframe content has not been added to DOM at this point, the script is executing on elements that are 'not there'. This explains the correct performance when the iframe is reloaded.

NEW QUESTION: How do I cause the troublesome script (now placed in an external file, and called to the gallery page from it's body using

$.getScript("res/jquery_JAlbum.js", function(){
  alert("gallery script loaded and executed");
 });

to be loaded and executed when an appropriate tab is clicked and displayed?

In other words, what can one do to make UI tabs load iframe content with ajax, confirm that new elements have been added to DOM, and only then execute the functions that will turn the list elements into a gallery?

ajax - Issues loading Jquery (Galleria) script from inside an i-frame ...

jquery ajax iframe jquery-ui-tabs galleria
Rectangle 27 53

window.frameElement Returns the element (such as <iframe> or <object>) in which the window is embedded, or null if the window is top-level. So identifying code looks like

if (window.frameElement) {
  // in frame
}
else {
  // not in frame
}

Note attempting to read frameElement will throw a SecurityError exception in cross-origin iframes, according to W3C (WHATWG says it should return null instead). So you might want to wrap it inside a try...catch statement.

This is rather new [...] method <-- through your link, it says IE5.5. I tested on IE9 - seems to work fine.

@user151496 really doesn't work? You are the first person who said this since 2013.

javascript - How to identify if a webpage is being loaded inside an if...

javascript facebook iframe
Rectangle 27 53

window.frameElement Returns the element (such as <iframe> or <object>) in which the window is embedded, or null if the window is top-level. So identifying code looks like

if (window.frameElement) {
  // in frame
}
else {
  // not in frame
}

This is standard and rather new method. It exactly works in Chrome and Firefox. I can't recommend it as universal solution but it should be mentioned here I think.

Note attempting to read frameElement will throw a SecurityError exception in cross-origin iframes, according to W3C (WHATWG says it should return null instead). So you might want to wrap it inside a try...catch statement.

This is rather new [...] method <-- through your link, it says IE5.5. I tested on IE9 - seems to work fine.

@user151496 really doesn't work? You are the first person who said this since 2013.

javascript - How to identify if a webpage is being loaded inside an if...

javascript facebook iframe