I am developing one Firefox plug-in. In that, I am using sidebar and I am having an iFrame element within that with the source content from a HTML page.
Now, I want to call a JavaScript function which is inside the 'chrome' (i.e. inside the plug-in) by an onClick() event on the HTML page, loaded in the sidebar.
Is it possible? Please help me in this.
The main aim is to highlight the context in the main browser window similar to that present in the HTML page loaded in the sidebar.
Thank you.
Related
I am loading a webpage using loadURL in my main window and want to have a sticky button on at the bottom right for performing some action.
1) Is there any way i can have a button or custom navbar on top of loaded webpage in my window? Currently I've made another child window with height and width same as that of button and placed it on top but it doesn't look/sound good.
2) Is there any way to load a file of mine (say xyz.html) and then just have a section where that URL is loaded, since websites don't allow their webpages to be loaded in iframe any more.
1) Is there any way i can have a button or custom navbar on top of loaded webpage in my window? Currently I've made another child window with height and width same as that of button and placed it on top but it doesn't look/sound good.
Yes, this is definitely possible. The two ways that I can think of to do this include using the preload preference (see webPreferences) to preload some JavaScript before loading the actual page and through the webContents.executeJavaScript() function.
The latter method would look something like this:
win.webContents.executeJavaScript(`
document.body.insertAdjacentHTML('beforeend', '<p>Add your <span>sticky</span> button code here</p>');
`);
This method essentially injects HTML by using the webContents.executeJavaScript() function where win is your BrowserWindow.
2) Is there any way to load a file of mine (say xyz.html) and then just have a section where that URL is loaded, since websites don't allow their webpages to be loaded in iframe any more.
I bet there's some workaround to directly inject HTML but the methods I mentioned above (preloading or using executeJavaScript) would be much easier to accomplish this same task.
Hopefully, my answer could be of help.
Good luck!
We have the following situation:
We have a webpage (let's call it Page A) that gives us only the header of a website.
We have another webpage (let's call it Page B) that gives us the content with no header and includes the Page A in a hidden iframe.
When Page A is loaded it will get its own HTML and add it in an empty div in Page B.
All of this is working as expected.
My question:
Can I delay the page rendering of Page B when it reaches the iframe, wait for the iframe to load and when the HTML is populated in Page A to continue the rendering. The behaviour should be as if I'm calling the contents from a synchronous AJAX call. The idea is NOT to show the content of the Page below the main menu until the menu HTML is populated.
The business logics behind this:
We're using an external service as a forum and we need to add our website header above. They can give as a free-html slot where we can put our own HTML. The header is dynamic so we need to load it each time from an URL. Since their site may response faster we don't want the content to load and several moments later the menu to pop out of nowhere. We need to have the menu HTML populated before we continue showing the content. The Menu HTML is populated from an iFrame by the iFrame so we need to wait for it to load.
Any help will be appreciated.
Maybe you can hide the contents of Page B via style="display:none;" and then show the contents when iframe's load event fires.
Insert the markup for the <iframe> dynamically in a content loaded event handler. Since you've tagged the question jquery
$(window).on("load", function() {
var iframe = $("iframe").attr("src",url).whatever();
$("whatever selector").append(iframe);
})
I got stuck in a problem here. I have a fancybox inside an iFrame, and it works normally, but I need it to extend outside the iFrame so it can fill the whole screen (I mean extend to it's parent).
Does anybody knows how to do that?
If both the page and the iframe are in the same domain, you can open the fancybox window in the parent from inside the iframe. Check out the demo.
Parent Window (contains fancybox script, css and iframe)
<iframe src="child-page.htm" height="250" width="500"></iframe>
Child Page (contains script to call fancybox in the parent)
$('a').click(function() {
// target the parent window (same domain only)
// then call fancybox in the parent
// You can add any HTML you want inside the fancybox call
window.parent.$.fancybox('<img src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg" height="333" width="500">');
});
It's not possible. Iframes are independent pages and can only interact to the parent via JavaScript, and even then it's shady behavior.
Your fancybox cannot extend out of the iframe no matter what you do, but with some work you could call to one on the parent page via JavaScript.
This post will answer your question in both directions (parent -> iframe, iframe -> parent): Invoking JavaScript code in an iframe from the parent page
As a side note, iframes fell out of vogue about 5 years ago. I'd avoid them in any new production.
Cheers. :)
I would like make a script for Greasemonkey (GM),that find and navigate in a link embed in a flash element.
I think that is possible to make it to work with function .click() ,but won't work :(
Here's the source code of the page that contains flash elements..
Source code
Is possible to make that to work?
Thanks in advance.
LUCA.
Flash runs inside of a plugin within the browser, so from an external code point of view it's a black box. The only way to be able to programatically access a link embedded within a Flash element is to have the Flash object pass the link to your script via loadvars.
I've got a question about CSS based popup windows, like those generated by jQuery UI's dialog system, or Colorbox. If I use those (or something like them) to open a popup window to an HTML page and that page has Javascript in it, does the Javascript in the popup window run in its own context, or does it become part of the context of the Javascript in the parent window that opened it? I ask so that I can write the Javascript on both pages (parent and popup) so there is no namespace collision.
Thanks in advance!
Doug
That depends on the type of popup. (I'm assuming we are talking about in-page popups here and not window.open() ones that open a new browser window.)
If it contains an IFRAME in which you load a separate page, then that page will have its own styles. You will have to re-load any CSS and JavaScript files you need.
If it doesn't contain an IFRAME, but just a regular DIV or other element into which content is loaded through AJAX (or directly output in the "parent" HTML page) then the popup will run in the context of the parent page.
If you use real popups (new windows) it is definitly in its own context.
If you use modal windows purely in HTML it depends. It can be an iframe (own context) or injected elements (parent context).
With Colorbox, you can set the iframe property to true and it will load the content in an iframe. This gives the page its own scope. If you don't use an iframe, then the page will be loaded in the context of the current document.
$('a.someLink').colorbox({ href:"somePage.html", iframe: true });