iFrame Access Problem - javascript

I have data in a iframe. When a user performs an action - I want this want this data to be collated and sent "inside" another iframe inside this iframe.
I have having a bit trouble achieving this and was wondering whether its possible and if it is, how I can do it ?
Thx

A quick solution would be to pass instructions (actions, variables, etc) as query variables in a url. You can use your outside script to change the iFrame reference and a script inside the iFrame can read back those variables and do something with them.
Basically starting with http://someurl.com/page.html in your iFrame and dynamically changing it to http://someurl.com/page.html?action=do-something&with=this. Since we're talking Javascript, you can force the iFrame to refresh asynchronously, giving the illusion that it's loading new, interactive data.

I has this problem a while ago and did not find any solution. As I remember, you cannot control an inner frame from its owner due to some security concerns.
Later Edit: you might be able to synchronize them by using an intermediate component (such a database) - this is how I ended with my issue

Related

Best way to interact with iframe

Hey guys i really need your help. I am creating some kind of application for dynamically searching multiple items. For example, I want to search specific products in one store via iframe(for example, src will be 'www.store.com/search'), i create a array of all objects which i want to search and i create loop which will change iframe's src('www.store.com/search/item-1', 'www.store.com/search/item-2', etc.). I need to access price for selected item, preferably through iframes dom element. I was trying to access iframes dom element and console with no success (Blocked a frame with origin from accessing a cross-origin frame). I am pretty sure im not headed in the right direction, does anyone have better solution or a way to bypass this?
If you don't control the contents inside of the iframe there is no easy way to do this. The web browser has a security feature (called CORS - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) to prevent this sort of interaction for security reasons.
In order for this to be possible the page inside of the iframe needs to be your page, and you need to configure the CORS settings on it to allow being used with an iframe like this.

How can I delete a block that contains faulty JavaScript breaking the C5 interface?

I was working on an HTML block in Concrete5 located in the footer. I made a javascript call - can't quite remember it, but I think it was referencing either jQuery or the Google Maps API. Anyway, now the block won't display and oddly enough, I am completely unable to modify/add/remove blocks now. I'm pretty sure it is because of the javascript call it is making, but I can't modify or delete the block to fix the issue.
What am I supposed to now? I tried disabling javascript in my browser but of course that won't let me modify the blocks either.
I don't know 5.8+ that well yet, but this may be unfixable from within the UI.
If the error is in a global area, your best bet might be opening the template, changing the area name where the global area is used and displayed, and recreating it from scratch.
You'd be looking for something like this:
$a = new GlobalArea("Footer Nav");
and change the global area's name, thus creating a new one.
If that's not an option, you may have to resort to deleting (or altering) the faulty block through the API.
In my experience, the easiest way to get a blank page that has C5 bootstrapped is creating a custom Dashboard page:
It's a common task for a Concrete5 developer to create their own Dashboard pages. Dashboard pages are just single pages located inside the "single_pages/dashboard" directory. Once they're added within that location, they automatically show up in the Dashboard.
Now, as to how to edit or delete the block inside the area, I don't have a complete recipe, but this example page showing advanced area operations should get you started.
The API documentation for GlobalAreas is here, for Block here (notice the delete() / deleteBlock() methods.)
FYI although the solution marked as best works, it leaves data in the database that will stay there forever and forces you to change your area's name which might be ok once but not if it happens again and again.
Since that was an HTML block, the best way was to go to your database's interface, probably phpMyAdmin, go into the table "btContentLocal" and do a search for the faulty code you had entered in the HTML block then fix or delete it.
Like that you're back to normal, you don't leave stuff behind, and you can keep your area as it is

Page is not updating url or source code in chrome's dev tool when navigating the website

Goal
I'm making a Chrome extension to perform some manipulations on my university's website since the layout to select a course is bad. For this I need to access elements to read their inner information and also copy their CSS to add certain information that I will obtain from a different site, in a way that fits the style of the page.
Problem
When I open the source code on the exact page I want to use, it doesn't display the correct HTML. Instead it shows the main page's code under the dev tool. The interesting part is that when I highlight a certain element the code shows up and I'm able to make changes within the tool. But if I try to call a specific element under the console using $(id) or $$(id) it would show either null or [].
This causes some problems to because I'm new to any sort of web-related development and I would like to see the complete source so that I can select the elements I want and manipulate the page the way I would like. Maybe there is something I'm overlooking? that's why I need your help.
Possible reasons
I tried many things and try to research and concluded that it might have to do with frames since the url is not changing. However I'm not able to find any resources to teach me about frames (I know nothing about it) if that's the actual problem.
If the problem is another I would appreciate any assistance in solving it or any work around that I am not aware of.
The reason is definitely the use of frames. There are multiple documents at play here, the top level document and each frame has it's own document. This is important because the JavaScript you are executing is 99.9999% the top level document and not a child frame's document. Due to this, it's not finding the DOM nodes because it doesn't search the frames' documents.

Make DerbyJS only re-render certain DOM nodes

The way DerbyJS (http://derbyjs.com) seems to work at the moment is that it replaces everything in the body tag of the document whenever you click a link.
Is there anyway to say use the template, but replace the content inside #main-content with that instead of the whole body?
Navigation on the left is fixed and doesn't need the benefits of realtime interaction.
Why this is an issue is needing to run some Javascript on the page load to set the size of some containers based on the size of a users browser window, and once I click a link, this setup gets wiped and recreated, and of course, the Javascript doesn't run again, because the document itself hasn't refreshed, just the body.
This would also allow me to write nicer jQuery bindings for the most part, $('element').click(, rather than $('html').on('click','element', ...
Any thoughts, or is this a step too far for this framework at this point in time?
P.S. As I'm only just getting started with Derby, and realtime frameworks in general, maybe what I'm trying to do isn't best practice anyway? I chose Derby because I like the UX part of initial render on the server, then the rest in the client, but sharing routers, which reduces the duplication of code. Open to any better ways of achieving this.
There is no way to rerender part of body on page reload. Just whole body.
You can use app.enter hook to run js code after every page render.
No need to use jQuery bindings, use Derby bindings
I fully agree with Vladimir's answer, just trying to add something to it.
It should be possible to re-render part of the UI through transitional routes (http://derbyjs.com/#routes). In your case it seems like app.enter is the way to go though.

How do I get the current iframe location from within the iframe?

I've seen solutions like
top.document.getElementById('iframe_a').src
But the problem is, that I don't know the Iframes ID. My Application is running as a Gmail-Gadget and therefore I don't know which ID Google will generate.
So how can I get the URL of my gadget?
Using JQuery will also be fine.
If your script is executed within an iframe, location.href should do it. You might want to access the location object in more detail tho.

Categories

Resources