Google Docs in iframe AND Save & Close button - javascript

I am using Google Docs in my project using its API.
I am loading docs in modal window iframe using http://fancybox.net/ a jquery plugin
It works fine but when in Google Docs Save and Close button is press, it closes the iframe and redirects the current page to Google Docs, So is there any way I can prevent the redirection to Google Docs and just close the modal window?
Thank You.

There are a few other questions i've found on SO that deal with this type of question;
How to prevent IFRAME from redirecting top-level window
How to prevent IFRAME from redirecting top-level window
Basically it involves using the 'window.onbeforeunload' function to kill the iframe if it attempts to redirect.

Related

Capture load event on popup JavaScript

I'm tiring to login with google on popup window, that of course I'm opening in my code with window.open(). The problem is that I couldn't listen load envent on the new window because, the popup belong to other domain (google) and the event is Blocked by JavaScript.
I need to know when the popup is opened and when de user is logged in (url changes, and navigate to my own callback page).
Please can someone help me!!!
Thanks very much.
There is no way to do that with a site that does not cooperate.
If you are trying to use Google as a login service for your site, you can look at OAUTH.
The way it works is, in short:
Call Google
Give them a web page to call if the login works.

Is it possible to inject a chrome extension popup into current webpage without using react?

I'm currently working on chrome extension and I'm dealing with a content injection problem.
In my extension when user clicks the button inside the popup, he has possibility to choose DIV from the webpage he's currently on and then he can return back to popup to choose options for that chosen DIV.
The problem is that I can't force the popup to be open when user clicks outside it (actually I can with open popup console, but it's not a solution here) and the popup.html is reloading every time extension is shown to user.
So I came up with an idea that I can inject a popup into an iframe in the webpage to have control over it's behaviour but I found similar solutions only connected with chrome extensions based on react. Is it possible without any framework?
Any help would be greatly appreciated.

Navigate between facebook profiles listener

I'm developing a google chrome extension that will insert a button in facebook profile cover, using content script that documented in chrome API i can insert that button on the refresh the page or open the profile in other window - tab, the problem is open any profile link in the same window - tab will not add that button! I think facebook load the content via AJAX without refresh the page.
I used that code:
$("div#contentArea").on("DOMNodeInserted DOMSubtreeModified DOMNodeRemoved",function() {
// Do somthing
});
but it does not fire on navigate between profiles!
How to know if the user is open other profile? I'm thinking to check url for every 1 seconds but is that the final solution?
I know it's been long time for this question, but I see it will be better to share the solution, a new one!
It's not good to use any of these DOMNodeInserted DOMSubtreeModified DOMNodeRemoved, instead use this API from HTML5 MutationObserver.
There is more than that you can use within MutationObserver is this library mutation-summary.
Thanks for Firefox developers because they share this with me when I submitted this add-on to store.
Best if luck to all.

Creating iframe embeds and using modals

The company I work for is trying to come up with their own version of embed buttons. The logic is similar to what Twitter and Facebook offer. Unlike Twitter, we are using modals in-place of opening a new window. As the moment, we have developer a modal library which suits our needs.
Now, I will explain the process we are following:
Our embed script will be loaded in the user's website.
It looks for a link which we will provide to the user, and an iframe will be loaded in place of it.
The iframe uses two scripts — jQuery and our modal library.
On clicking the button present inside the iframe, the modal should open but it is present on our domain and it should open in the parent window.
From my analysis of the situation, I have come up with the following questions:
I have looked around the net but I have a feeling that opening a modal inside a parent window is not possible. Is there a workaround for this?
To prevent clickjacking we have set X-Frame-Options to SAMEORIGIN. How can we load content in an iframe from our website?
If we skip loading the button inside the iframe and modify the parent DOM, we can use our modal script, but applying our own styles to the buttons becomes a pain as we will be using important! for all styles. What other options are we left with?
To answer your first question, it isn't impossible as I've done something similar, thus I think it should solve your third question as well.
So on the parent page you would have a script such as
function showModal(display) {
var colorbox = $('#colorbox');
var overlay = $('#cboxOverlay');
if (display) {
colorbox.fadeIn("medium");
} else {
colorbox.fadeOut("medium");
overlay.fadeOut("medium");
}
}
I've used colorbox but you could use your custom modal, I've also used a parameter so you can show and hide it as you please.
Then from your iframe you could use this script to call your modal
javascript: window.parent.showModal(true);
Hope this helps.
1) Why dont you just open the modal from the iframe? It will make no difference if you call it from parent window or the child window.
2) Use JSON-P

How do I track Fancybox clicks in Google Analytics?

I have a page with 24 links that each open up a .html file in a modal window with Fancybox, and each .html file has a video embedded in it. How do I track to see who is opening which videos?
How google analytics works
You put a by Google provided javascript (the tracking code) on your page .
Everytime the page is loaded, the javascript is executed and a hit is recorded by Google.
How fancybox works
You can use fancybox in different ways but the default behaviour is that you feed it a link and it will open the content of this link inside an iframe
If you know how iframes work, you should know that they just load/display a page inside a page. But because they load an entire page, the by google provided javascript will also load.
Answer
So to finally answer your question...,
If you use fancybox by default (loading content inside an iframe) google analytics will already record the clicks on those pages.
If not you should check out the note below.
Note: This is how it works with the original Google Analytics tracking code. If you are using the new Asynchronous tracking you should really check out this page as it explains in detail how to hook custom events etc: http://code.google.com/intl/nl-NL/apis/analytics/docs/tracking/asyncUsageGuide.html

Categories

Resources