I am currently trying to write a script using javascript along side a bit of html and some css - but let's stick with Javascript as thats where, I think, my problem comes from...
In short what I want my program to do is these following points:
I have an iFrame in the main window of my program.
The iFrame is used to access a website (obviously duh :P)
There is a button outside of the iFrame.
That button will call a function when pressed by the user.
HERE'S MY PROBLEM:
I want that function to simulate the press of a keyboard key (in that case, a number key followed by the ENTER key twice.
The thing is, I need to 'simulate' these keypress inside the iFrame, so they interact with the website that is access through the iFrame.
In short, I can't seem to find a way to interact with the website in iFrame from outside of it. I would prefer a solution using pure JS but I'm fully aware that there would probably be a much simpler solution using Jquery. So I'm open to either one of them.
I don't think that pieces of my code would help as there is basically nothing coded so far, besides the main function and the basic layout of the page. I'm ready to redo the whole architecture of what I've done so far if needed.
Thanks for you help.
Yann
Related
When user presses either create entity button or edit entity button, there's the same modal window in an iframe that is build by js dynamically. So what I'm trying to do is to wait until it's fully rendered and then execute my custom js code. So is there a proper way to do that? Some sort of event like RenderFinished shooting or something? Don't want to use timeout since I understand that it's not a good way to do that.
What I tried so far is that I've added jquery to the page programmatically, since it's not used currently at that particular page for some reason (probably because iframe is built dynamically without jquery and I needed to add it myself).
After that I tried to access iframe via jquery selector and then on iframe.ready access element inside in the same manner (selector and even ready for that element). But iframe is accessed and element inside it is not. Console log inside ready function just outputs no elements found. When I placed breakpoint inside I saw that there's no modal window built yet and my code is executed synchronously before it. So there's nothing to find yet at that moment.
Oh and I tried to put it all inside $(document).ready, of course. But it didn't change the situation neither...
Any ideas about how to do that properly?
The final goal why am I doing all this complicated dancing: I'm trying to add validation that UrlKey for entity is unique. So I want to bind my js function to UrlKey input's onchange event and call backend api to do the validation and return new UrlKey if it wasn't unique and edit the UrlKey input accordingly. The problem that I stumbled upon is to execute my code after modal iframe window is rendered.
Any tips are highly appreciated.
You are in luck :)
2sxc added a Formula feature which will help you with this. There are videos and tutorials and more. See http://r.2sxc.org/formulas
I have a WinForms app that uses a .NET webbrowser control. What I need to do, is wire up an event on the WinForms side to fire when a value is set (via javascript) in the loaded HTML page. I had success doing this with an onclick event of a button, but I can't seem to get it to work with a custom event. I don't know if this is a limitation in what the browser control can attach to event wise.
So essentially, I need that when a JS function is called in the HTML page and sets a value of a hidden input element (or it could be a regular input that I style to be hidden), I need to know that in WinForms. If it helps, I am using browser flags in this application to emulate IE11 instead of the default IE9 engine. The HTML page loaded is also mine so I can modify it any way needed to make this work properly. I would just use the onclick events of the buttons, but this is a gmaps integration where there can be upwards of 2000 buttons generated (one per marker placed) so it seems like a huge waste of resources to wire up 2000 onclick events when any of those button clicks only modify 4 input fields with the data I care about.
This project happens to be in VB.NET, but C# solutions would be fine as well. They can be transcoded or if the solution uses C# specific features, we can move this to a separate DLL and reference it.
After spending a lot of time on this today, I found a solution. It isn't a direct solution to the problem I posted, but it got me to where I needed to be. I am still interested in an answer to the original problem if anyone has one, but for now, what I found I could do was to create a class in .NET that I could assign to the ScriptingObject of the browser control and then call window.external.myFunctionName, where myFunctionName is a function within the .NET class. This works great for my specific problem, but would not work if I didn't also control the HTML page I was consuming with the browser. That is why I am still interested in alternate solutions if anyone has one. Thanks.
I am adding the scroll event in javascript for one of my pages. The code is like this:
document.getElementById("myProject").addEventListener("scroll", myFunction);
function myFunction() {
document.getElementById("scrollEvent").innerHTML = "These are all my projects so far";
}
So, when users start scrolling, they will see a text "These are all my projects so far".
My problem is how to stop showing this text when users move to another page.
Please help ( I am a verrrry fresh developer)
Thanks so much
A few thoughts.
Without knowing your dev environment (e.g. are you using MVC with a framework?), I will assume you are simply talking about separate/individual HTML pages.
Each HTML page can have its own javascript. Just like HTML and CSS, there is no need to have the same javascript functions on every page. (You don't have the same HTML content on every page, right?) Usually, we divide up the javascript into multiple files - some files are added to every page, some are specific to a certain page. It is easiest to have one (external) javascript file that you reference on every page, and then specific javascript code for each page - either in a second external file that is referenced, or on the HTML page inside <script>//js here</script> tags.
If the DIV with ID myProject is not on the other page, then the javascript won't do anything. However, it is not good to have broken javascript on a page, so make sure it is not included on other pages.
If you are using a framework, like CodeIgniter or ReactJS or Angular, please tell us so we can adjust our answers accordingly.
If the case is a switching between browser tabs, you can use two different events like below.
$(window).blur(function(e) {
// stop scroll event, when switching to another tab
document.getElementById("myProject").removeEventListener("scroll");
});
$(window).focus(function(e) {
// start scroll event
document.getElementById("myProject").addEventListener("scroll", myFunction);
});
I am not sure what you are actually looking for, because when user switch between tabs, he can not see the text anymore no matter there is a scroll event or not. If you are concern about performance, then the above solution would help.
I prefer Chrome, but I would like it to operate also in other browsers. So, how to make a simple button that will onClick call a function to save html page as html file? Pretty much the same like user presses Right click > Save As.
I have two buttons already, window.print() for printing and location.reload() for refreshing the page, and I must add that this html page is running locally, so there's no web server.
Is it possible with onClick JavaScript as two examples above?
I don't think this is possible, as this would likely be a security violation.
You mention specifically that you are running this locally. Does that mean you are trying to create some sort of application? If so, you might throw it in to something like Brackets Shell. If you put it in there, you can implement your own native function to trigger the "Save As" dialog. It'd be a bit more complicated, but probably one of the only ways to accomplish it if you really needed an on-page Save As button.
This is not currently possible using pure JS, but you can iterate through the document and export the contents to a file manually.
See this similar post: Export DOM
I was wondering if there is any way to find all the scripts associated with a particular element in web page.
That is if there is a photo, and there is two attached jquery function like on mouse over and on click, I need to get details of this functions without looking onto entire script.
One way is with a bookmarklet called Visual Event
There isn't really an easy way. I spent a few days trying to write an augmentation wrapper/extension that would track all even assignment in page and thus allow for inspection of such - the problem is that it requires tweaking for each library, and iirc wasn't useful if any native event assignment was used.
This is exactly the reason there needs to be well organized code, and remembering that "unobtrusive" doesn't mean "incomprehensible" - try to keep all your event assignments well organized and easily associated/found for a particular element.