I am stuck at stupid problem. I am trying to develop a Firefox Extension in which I have a popup panel and in that panel, there is an iframe of a tasks.html File.
I want to postMessage to that iframe on click of a button in my web page(Say webpage interaction with the plugin) but its not working.
Here is the image to the Panel on how it looks.
This is the function, M using to send data to the iframe. The Post Function is called when the button in the webpage is clicked.
function Post() {
var iframe = window.document.getElementById("iframe").contentWindow;
postMessageToWindow(iframe, "Hello");
}
function postMessageToWindow(win, message) {
try {
win.postMessage(message, '*');
return true;
} catch(e) {
return false;
}
}
and In that html page, I have
window.addEventListener('message', function(e) {
var str_data = e.data;
document.getElementById('test').innerHTML = str_data;
});
but nothing gets shown in the test DIV.
Please help me with it. Thanks.
Ignore my message about win.postMessage I didn't know that postMessage was a "native" function. It's cool helping you I learned something.
Anyways yes it would be nice if your code worked on first time. Thanks to some info from Blargh I found your problem.
Find sample_button.appendChild(tasks_popup); and remove that, why were you doing that? Right now its cloning the original object and adding it.
Another thing, why go through postMessage? Instead of postMessage you can simply do tasks_iframe.contentDocument.querySelector('#test').innerHTML = 'why bother with postMessage, just do this? but i fixed postMessage for you too<br>';
Another thing, the interval of 300ms works but its intensive and not the best solution. It will work for now though.
Do you have plans to upload this to addons.mozilla.org? They don't like setting innerHTML, if you plan to release there let me know and I'll show you how to do it without innerHTML.
Also your "Refresh" button in the panel in overlay.xul needs fixing to document.getElementById('tasks-list').contentDocument.location.reload()
in the code you posted, im not seeing the toolbar button get added, its not even in the customize view, did you test your sample code you uploaded?
the addAsTask function is failing hard in your sample code because elements like #sample-button and #TasksPanel don't exist. please make sure your test case works before uploading
box.com/s/hxn16axnxbwc151h92g
the addon doesnt work on install but i see a problem here:
function postMessageToWindow(win, message) {
try {
window.top.postMessage(message, '*');
return true;
} catch(e) {
return false;
}
}
on line3 it says window.top. use win.top. also i dont think u need to use .top. just use win.postMessage
also is postMessage a function in the iframe? because when i look theres no postMessage function in tasks.html
Related
Hi I am still very junior so I would like to apologise in advance if my question is not straight forward.
I have a page with a button to edit the records from a Radgrid and a pop up page will be opened on a RadWindow for editing, so now I am trying to close the popup page once I am done and refresh the parent page, I have tried window.close() but it is not working on certain browsers like IE.
I am using c#. I will be happy if anyone can help me with the code for closing the pop up page that will work in all browsers and refreshing the Radgrid on a parent page.
What are You trying to achieve is well, quite weird, but ok :P
If You will look at the docs here, than You can see (at the bottom, under compatibility table) a info which is not part of any specification, but as far as I know, most browsers apply it. Basically, You can't close a page with script, if You haven't opened it with script.
So I would suggest You to open the edit page from your 'mother' page, keep a reference to newly opened tab, and trigger close when You will receive some event which will tell You that editing is completed.
But to be honest, It's quite bad idea to edit stuff in separate page. I would suggest You to simple use some modal dialog or redirection.
I managed to get a solution, I used a javascript code.
Also calling the refreshGrid function from the parent page.
//Added on the popup for close and refresh
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return oWindow;
}
function Close() {
GetRadWindow().close();
GetRadWindow().BrowserWindow.refreshGrid();
}
//This goes to the parent page
function refreshGrid() {
$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");
}
Confusingly, or perhaps not, I don't want it to postback, as it is loading a popup containing content, but the postback closes the popup.
The code is really simple, and its just a bog standard asp:Hyperlink. Theres nothing that I can see which could cause this, and I am mainly confused as to how and why it is being handled so differently by each browser.
The only thing I could think of was JS with
event.preventDefault();
Any one got any ideas what could cause this?
I am reloading an iFrame with a new source, which sits on the page, but it is forcing the entire page to postback on firefox only.
iFrame.attr('src', newSrc);
The rest of the code:
$('.button-try-glasses').on('click', function (event) {
var modal = $('#modal-container');
var newAsset = $(this).attr('data-asset');
var iFrame = modal.find('iframe');
var currentIFrameSrc = iFrame.attr('src');
var newSrc = currentIFrameSrc.substring(0, (currentIFrameSrc.lastIndexOf("/") + 1)) + newAsset;
iFrame.attr('src', newSrc);
Trylive.parse();
showPopup($(null), '#modal-container', true);
event.preventDefault();
});
If I comment out the .attr line, it doesn't update the source, but it also doesn't postback and then close the component.
To answer exactly we need your aspx and js code. For quick hit and try. There must be some Js error. You can write
return false;
at the end of your Js code.
As the others mentioned we need your aspx and js code.
But as a workaround you can try to wrap your ifram with asp UpdatePanel which should fix it.
$('.button-try-glasses').on('click', function (event) {
event.preventDefault(); //put it here
....
return false; //this must be last line
});
hope that works for you
Looks like the problem is with the page you are trying to load in the iframe. The javascript in the iframe could be doing something like top.location = "post url" or window.parent.location="post url".
Could you try opening another url like google.com in your iframe and see if the problem persists
iFrame.attr('src', "http://google.com");
You might wanna try checking the following options for errors -
Order of calling => It is always a better approach to call loading or contents of your modals after the modal is shown. Because until the containers of modals are shown, you might not be able to use them in codes. For example, calling iFrame.attr('src', newSrc); after executing showPopup($(null), '#modal-container', true); could be a good idea.
Check Url => Make sure url is properly generated and the url you are trying to load supprts CORS.
I have tested with Twitter Bootstrap to try to load an iframe inside a modal, it worked perfectly. You might wanna check out the codes at jsfiddle, this might help you solving yours.
Here is a screenshot of the content loaded in modal -
Alright, I am working on a site that displays third party developed courses, so I can't change anything in the actual pop-up window at all and the redirect call has to come from the parent window. The parent, child, and the redirectLocation are all on the same server, so that shouldn't be an issue. Here is the code I want to work.
var new_window = window.open('courseAddress.php')
new_window.onbeforeunload = function(){
popupClosing();
}
function popupClosing(){
window.location ="redirectLocation.php";
alert('The popup has closed!');
return false;
};
The alert is firing, but the parent window doesn't seem to refresh. If I put the window.location ="redirectLocation.php"; outside of the .onbeforeunload the refresh works just fine.
I am sure I am missing something simple. Thank you in advance. I have read the other issue like this on here, however they were able to use window.opener.loactionfrom the child which unfortunately I am unable to do.
I have found a way that works, buuuuuuuut it's really nasty. I just have the parent window keep checking to see if the child window is there. Here is the fiddle for it: http://jsfiddle.net/ex9e7uLq/
Thanks to Eclecticist for sticking with me on this one too!
I've tested this on Chrome, Firefox, and IE all with no problems. Here is an example JSBin.
var win = window.open("http://www.google.com");
var winClosed = setInterval(function () {
if (win.closed) {
clearInterval(winClosed);
location.assign("http://www.bing.com/");
}
}, 250);
From your question, I know you wanted to attach an event handler to the child window. However, while testing different methods to do just that, I ran across a plethora of problems. Generally, Internet Explorer would fail to register any event in the child window from the parent window. Firefox and Chrome would act as if the event fired (regardless of the type) as soon as the child window launched.
I've read other SO questions with answers that apparently worked by doing what you want, but personally could not get them to work. Good luck :)
try this:
var new_window = window.open('courseAddress.php');
var intr = setInterval(function(){
console.log(new_window.closed);
if(new_window.closed){
clearInterval(intr);
window.location='http://www.google.com';
}
}, 200);
I want the contents of a link get printed by jQuery. What do i do?
Following is my code:
DEMO:
Print
$(document).ready(function() {
$('ul#tools').prepend('<li class="print">Click me to print</li>');
$('ul#tools li.print a').click(function() {
window.open('www.google.com');
window.print();
return false;
});
});
"Printing the contents of a link" sounds ambiguous. I guess what you are trying to do is to print another web page? It might work if you opened the page in a new frame and printed that, it seems to me that this question might help you.
You would have to call print() on the window you are opening, not the one the original code is running in.
var foo = window.open(bar, 'bar');
foo.print();
(You might run into timing issues if the window hasn't had time to load the document).
However, in you example you appear to be trying to open a third party page (although you forgot the http://). The same origin policy will prevent you accessing the print method of the remote document.
Situation: for various reasons (mainly, that it will be used at times in situations where the Internet is not availble), some JavaScript-heavy HTML I am building has to be able to run at times strictly on the client, with no server involved. For the most part, I've been able to come up with workarounds that allow pages from this site to be saved by the usual browser 'Save Page As' mechanisms, embed all the pieces they need, and massage paths to refer where I want them to (on the local machine) when the browser isn't smart enough to fix the URL (which is more often than I might have thought).
One piece I haven't been able to solve yet, though: each main page can open a help page in a new tab/window. To do that, I embed the content of the help page in the main saved page. Then I can use helpWindow.document.write(helpContent) to open that. Problem: as far as the browser is concerned, the help page ends up with the same URL as the original page, so I can't effectively use page-internal links on that page: it tries to load the main saved page if you click one!
For example: <a name="target" /> ... link in the help page: if you click "link", the browser loads the main saved page, rather scrolling the help page.
My temporary workaround is to strip these links when I have to operate in this environment, but I'd sure rather have a way to make them work. Any suggestions? Suggestions could include an entirely different way to open a help page. I'd rather not use iframes, though, I'd really like it to stay in a separate tab/window.
You can scroll to the bookmark with JavaScript with element.scrollIntoView():
function goToBookmark(e)
{
e = e || window.event;
if (e.preventDefault)
{
e.preventDefault();
}
e.returnValue = false;
var bookmarkName = this.href.replace(/^#/, "");
var bookmark = document.getElementsByName(bookmarkName)[0];
if (bookmark)
{
bookmark.scrollIntoView();
}
}
for (var i = 0; i < document.links.length; i++)
{
var link = document.links[i];
if (/^#/.test(link.href))
{
link.onclick = goToBookmark;
}
}
Or, if you are using jQuery:
$("a[href^='#']").click(function(e) {
e.preventDefault();
var bookmark = $("a[name=" + this.href.replace(/^#/, "") + "]")[0];
if (bookmark) {
bookmark.scrollIntoView();
}
});
You should read this: http://en.wikipedia.org/wiki/Single-page_application
In particular try: http://en.wikipedia.org/wiki/TiddlyWiki
(Sorry, that this doesn't answer your question, but if you have not see those, maybe you can get ideas from them.)
Edit:
I tried this out a bit, and that's really strange! It almost seems like a bug to me. Do all browsers do this?
A solution could be to use ID instead of A NAME (which BTW you can/should do even if you wanted to link by anchor fragment) and then use
document.getElementById(elID).scrollIntoView();
To jump to the element.