I'm using looker for a table visualisation.
I need the embedded iframe to communicate with parent window.
I'm using embedded Iframe events for some visualisations. And I'm receiving the default events
But I'm need to create and broadcast my own events.
For example, one cell in the table should broadcast user:clicked:icon which the parent window can than act upon.
Tried several methods through the LookML interface on the dimensions that I'm using (html, action etc) to even get something like page:changed to trigger, but with no success
Update
Found a current work around. Using an existing action (page:changed) on an html created dimension (a tag). I was able to intercept a navigation and accomplish some communication between the parent wrapper and looker iframe
Related
I cannot drop elements onto iframe that is rendering my own components.
I'm trying to implement drag and drop functionality to a child iframe component.
After passing a dropRef, from a pareent, to a component rendering the iframe, dropping works only on components outside the iframe (IFrame is rendering my own components, not a separate website, so there is no CORS policy problem).
However, dropping does not work on the elements inside the iframe, even after passing the dropRef inside.
I checked this, and some other examples, but nothing seems to be working (Examples below seem to show wrong information in the alert).
https://codesandbox.io/examples/package/react-dnd-multi-iframe-backend
Is there any simple way to drop the draggable elements into the iframe?
I'm relatively new to React (and Javascript, for that matter) so please bear with me.
To put my question shortly: how do i trigger a resize event on my window/component in React?
Now below is a little more context, which may actually prove that i'm asking a wrong question here.
I'm trying to create a small app with several tabs. The component is taken from BlueprintJS framework. The content of these tabs is loaded using a javascript API, which in turn uses RESTful requests to a remote application. The content that will be rendered in my tabs is some tables and charts.
Here is a caveat. The actual rendering of those tables and charts is performed by the javascript API i have to use, not by my React app. I have to pass an ID of a to the API, and it will render returned content into that .
The problem: Only the content of the default active tab is rendered correctly. If i switch to any other tab of my React application, the content is not rendered. HOWEVER if i resize the window the content is rendered instantly (i believe this is handled by the javascript API i'm using). Also if i update parameters of the currently active tab to make the API load updated content from the remote application, the content is also rendered in the active tab.
So i figured if i can simulate the resize event when switching between tabs i can get my content to render.
I tried setting a conditional class on my as depending on whether the current tab is active or not:
<div className={this.state.SelectedTabId === "tab1" ? "container" : "hidden"}>
where "container" and "hidden" have different width configured in CSS file, but this doesn't help. I also tried to directly manipulate the DOM (at least as a test) but even that didn't make a difference:
let e1 = document.getElementsByClassName('container')[0];
e1.width = e1.scrollWidth - 1;
renderedElement.resize(); //this is an API method which is supposed to re-render the content it returns
I'm currently working on a webExtension, and injected the html of my webExtension into an iframe. I want to drag stuff from arbitrary web pages into a droppable area in the iframe, and display them in the droppable area. I have a dragstartListener that uses postMessage to send the HTMLdocument of the element dragged everytime it listens to a dragstart event. But postMessage cannot send objects with methods inside. Are there any alternatives to implement the function? Thank you!
I figured out a solution: using XMLSerializer.
XML Serializer can actually serialize dom elements into strings. Postmessage can send strings to another window safely.
I'm making a game using JavaScript, currently I'm using window.location = "somepage.html" to perform navigation but I'm not sure if that is the correct way to do it. As I said in the title I've choosed Blank App Template so I do not have any navigator.js or something like.
Can you guys tell me the best way to do it?
Although you can use window.location to perform navigation, I'm sure you've already noticed a few of the downsides:
The transition between pages goes through a black screen, which is an artifact of how the underlying HTML rendering engine works.
You lose your script context between pages, e.g. you don't have any shared variables or namespaces, unless you use HTML5 session storage (or WinRT app data).
It's hard to wire up back buttons, e.g. you have to make sure each destination page knows what page navigated to it, and then maintain a back stack in session storage.
It's for these reasons that WinJS + navigator.js created a way to do "pages" via DOM replacement, which is the same strategy used by "single page web apps." That is, you have a div in default.html within which you load an unload DOM fragments to give the appearance of page navigation, while you don't actually ever leave the original script context of default.html. As a result, all of your in-memory variables persist across all page navigations.
The mechanics work like this: WinJS.Navigation provides an API to manage navigation and a backstack. By itself, however, all it really does is manage a backstack array and fire navigation-related events. To do the DOM replacement, something has to be listening to those events.
Those listeners are what navigator.js implements, so that's a piece of code that you can pull into any project for this purpose. Navigator.js also implements a custom control called the PageControlNavigator (usually Application.PageControlNavigator) is what implements the listeners.
That leave the mechanics of how you define your "pages." This is what the WinJS.UI.Pages API is for, and navigator.js assumes that you've defined your pages in this way. (Technically speaking, you can define your own page mechanisms for this, perhaps using the low-level WinJS.UI.Fragments API or even implementing your own from scratch. But WinJS.UI.Pages came about because everyone who approached this problem basically came up with the same solution, so the WinJS team provided one implementation that everyone can use.)
Put together then:
You define each page as an instance of WinJS.UI.Pages.PageControl, where each page is identified by its HTML file (which can load its own JS and CSS files). The JS file contains implementations of a page's methods like ready, in which you can do initialization work. You can then build out any other object structure you want.
In default.html, define a single div for the "host container" for the page rendering. This is an instance of the PageControlNavigator class that's defined in navigator.js. In its data-win-options you specify "{home: }" for the initial page that's loaded.
Whenever you want to switch to another page, call WinJS.Navigation.navigate with the identifier for the target page (namely the path to its .html file). In response, it will fire some navigating events.
In response, the PageControlNavigator's handlers for those events will load the target page's HTML into the DOM, within its div in default.html. It will then unload the previous page's DOM. When all of this gets rendered, you see a page transition--and a smooth one because we can animate the content in and out rather than go through a black screen.
In this process, the previous page control's unload method is called, and the init/load/processed/ready methods of the new page control are called.
It's not too hard to convert a blank app template into a nav template project--move your default.html/.css/.js content into a page control structure, add navigator.js to default.html (and your project), and put a PageControlNavigator into default.html. I suggest that you create a project from the nav app template for reference. Given the explanation above, you should be able to understand the structure.
For more details, refer to Chapter 3 of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, Second Edition, where I talk about app anatomy and page navigation with plenty of code examples.
I am not sure if this is possible but I have a small web application that is responsible for uploading files to the server. This app is used by another app which includes it in an iFrame.
The uploader app is using jQuery form to submit the file in the background and I would like to be able to notify the parent app when the upload is complete and the success callback fires.
I was thinking about somehow passing a function into the iFrame app that could be called from the parent but I am not sure how to do this or if it is even possible.
If both apps are hosted on the same domain, accomplishing this is trivial.
To call a function in the parent window from the iframe:
parent.myFunction();
To call a function in the iframe from the parent window:
document.myFrameName.myFunction();
(This requires that the iframe have a name attribute set).
If the apps are on different domains, you'll have to perform some greater hackery to accomplish this.
You can call parent.functionname. Or you can try the IFrame event, onLoad to call from the parent page itself.
I'm not sure what's the right way to do this, but you can write something like document.callback = function() { ... } in your parent frame and parent.document.callback() in your iframe.
Of course your pages in parent frame/iframe must be from the same domain or browser will block any interaction between them.