I have multiple iframes which need to share state, so that changes to the state in one iframe is reflected in the other iframe. I was looking into redux and having that globally scoped on the window so that both iframes have access to the store but wanted to get a second opinion and if anyone has experience doing this how I would go about it?
Something that I found was if the iframes is a different host than the parent window, the iframes cannot write to that object. So if you want to do something like window.parent.reduxStore = createStore(rootReducer) then you need to be on the same origin. Other than that issue the store has been able to keep both iframes in sync and working well :)!!!
Related
I have a Next.js app which has multiple pages. Each page has the same bar at the top of the screen which displays some data which is fetched from an internal API using SWR. The issue I am having is that to fetch that data it requires an ID of the logged in user (they log in with Discord via next-auth) and after they have left the first page, that ID value is no longer accessible to me.
I have tired storing it in local storage and session storage, I have tried passing it through other components, but nothing has worked and I am out of ideas of how to fix this. Is there any other way where I can pass a value between pages? Or is there a way I can access the session data again?
If you use this on all pages, you could just add that header into the _app.{js,tsx}(see the docs). In case you don't I suppose you create a layout component and reuse it across these pages.
In the future we might be able to use the new Routing API which allows passing adding Layout components for certain sub-routes. (Check the Layout RFC for more info).
because next js uses the react library so you can pass the data using props or you can use redux as well.
like this:
<Component propName={value}/>
I'm using the fetch API to display a webpage inside of a floating widget. The page has a form on it that uses viewstate. It works fine if the widget is on the same domain as the page I'm fetching, but if I put the widget on a different domain, then I get an invalid viewstate error. I have tried several things to resolve the issue, but none work. Does anyone know if it's possible to get this working?
No. If by your definition of widget you mean something like an iframe then this would cause issues regarding XSS if you are trying to manipulate data between the parent frame and iframe, it wouldn't if the domain was the same though due to the same-origin policy.
The task is relatively straightforward:
A Drupal website displays a list of articles with thumbnails. Some visitors would like to view it without images by clicking on a button/link and have that preference saved.
e.g. http://patterntap.com/collections/index/
The problem is all visitors are anonymous and given certain traffic, page cache is enabled.
My idea was to use some simple JavaScript to set a cookie, refresh the page and depending on the cookie values (or its presence/absence) display or hide the images.
Except Drupal serves cached pages quite early and the only quick way to modify the cached version that I could find is by hacking includes/bootstrap.inc and add a custom class to the body classes then hide the images with css.
A very wrong approach, I know. But I wonder if there is a way to save different versions of a page and serve the correct version?
Edit:
need to keep the same uri
the js to show/hide the images without reload and set the cookie is already in place
hook_boot() is not really called for cached pages, so can't do it via custom module
.htaccess mods?
Edit/solution:
In the end went with Rimian's suggestion. But it is possible to accomplish the task using our own cache.inc implementation as seen in the Mobile Tools module. Specifically, by extending cache.inc and updating settings.php to include
$conf['page_cache_fastpath'] = FALSE;
$conf['cache_inc'] = 'path/to/my/module/my_module_cache.inc';
So let me get this right. You wanna hide some images on a cached page if the user chooses to?
Why don't you write some jQuery or javascript and load that into your cached page with all the rest of the document?
Then, the client/browser would decide to run your script and hide images depending on some parameters you passed along with the request to that page or in the cookie? The script gets cached and only runs when you call it.
If you were hacking the bootstrap for something like that you'd really need to be rethinking what you were doing. Crazy! :)
Also take a look at cache_get and cache_set:
http://api.drupal.org/api/drupal/includes--cache.inc/6
I'm not sure I 100% understand what you are trying to do but here are my thoughts. One of your root problems is that you are trying to access what is essentially different content at the same uri.
If this is truly what you want to do, then Rimian's suggestion of checking out chache_get and chache_set may be worthwhile.
Personally, it seems cleaner to me to have your "with thumbnails" and "without thumbnails" be accessed via different uri's. Depending on exactly what you are wanting to accomplish, a GET variable my be an even better way to go. With either of these two options you would hide or show your thumbnails at the theme layer. Pages with different paths or get variables would get cached separately.
If you want the visitor to be able to switch views without a page reload, then jQuery and a cookie would probably suite your needs. This wouldn't require a page reload and switching back and forth would be quite simple.
My web-app records users via webcam and microphone. I want to use HTML/JS for the controls and content, so I created two separate Flex modules:
* A "Webcam Setup" module that lets you choose your camera and mic input devices
* A "record" module that lets the user record and submit the recording
When I embed either of these on the page, since they access the user's Camera/Mic object, Flash shows the Privacy dialog that says "[mysite] is requesting access to your camera and microphone. If you click Allow, you may be recorded."
The problem is, if I answer Yes in the Setup module, and later add the Record module to the page using Javascript, it again shows the Privacy dialog.
Is there a way to avoid the second privacy popup?
I would think that saying "Yes" for [mysite] would store that permission for at least that session, but apparently not.
What I've tried
I tried combining them into one SWF, adding it to the page once and moving the DOM element with jQuery's append() function when needed. When I move it, however, it reloads and asks me again.
Imagine if [mysite] was, say, blogger.com or livejournal.com (or, if it were still around, geocities.com). Would you want a "yes" response on that site to be good for every page under that domain?
Rememeber, just because you promise (cross your heart & hope to die) not to abuse the security hole you request, doesn't mean they can allow you to have that security hole.
Eventually, I found a usable workaround, similar to what I originally tried (above).
I combined the setup and record modules into one SWF. I first show the setup screen. When the user hits the Continue button on my page, Javascript calls a function in the SWF to swap to the Record screen.
I then move the <div> containing the Flash object to another location on page using absolute positioning, and resize the object.
Previously, I was trying to use jQuery's append() function to move the div within the DOM, and that was causing the SWF to reload. Just changing position and size does actually work.
You could build the "record" component to simply send and receive signals using an API you've created for your "setup" component (which has already been authorized, meaning one auth & two swfs) by using the LocalConnection class:
http://livedocs.adobe.com/flex/3/langref/flash/net/LocalConnection.html
This seems far closer to best practice than the other implementations mentioned, which smell a bit hacky and would probably confuse anyone who may inherit the codebase in the future.
I'm trying to post to the login form of an application on another subdomain of my site. It's a third party app that I don't have source access to.
I know that you can't access most features of a cross-domain iframe because of same origin policy. All I need to access, however, is the URL that's been redirected to (via JavaScript) within the iframe. It has a session token that I want to pass through.
That seems like something that might be safe enough to be allowed, but I haven't found a way to do it yet. I'm using jQuery, and I've tried $('iframe').contents(), but I seem to have no permissions at all on that object. I've also checked $('iframe').attr('src'), but it remains as the pre-redirect URL. Is there another way?
No, you don't have access to any properties within an iframe. You only have access to the outer positioning and styling properties.
This is why frames are such a pain to work with. I usually only use them if I don't care what is done within them.
Can you not do a server-side authentication and token passing? Instead of having the client do the authentication, can you not do that on your server? You may need to do some extra work to create the HTTP request and parse the response, but you avoid any iframe issues.
Bottom line is iframes probably aren't the best to rely on(especially when it comes to cross-browser functionality) for important things like authentication.
Try this example (method 2) in which the author sets up another iframe inside the first, loading a page at the original domain.
The inner page is allowed to call javascript on the outer parent, since they are loaded in the same domain.
Simply load the inner page with appropriate parameters, which can be passed on to the parent.