I have a html, say A.html. I am invoking A.html inside of A.html inside an IFRAME.
A.html
<html>
.....
<IFRAME>
A.html (same domain, etc as A.html)
</IFRAME>
</html>
This is a GWT app. This IFRAME is a popup, and when the user closes (clicks a close button) this popup (which is also loading the A.html as you can see above), I want to
fire an event to display some message on the outer A.html which means I need an access to codes outside of IFRAME. How can I achieve this?
Thanks
Since your iframe contents are being loaded from the same domain, you can call javascript functions on the containing page. I'm assuming that you're asking about calling the code outside the iframe from GWT. If so, then you can use JSNI.
For example, given the JSNI method:
private final native void postClosedEvent()
/*-{
$wnd.functionDefinedOutside();
}-*/
You could call the method within a GWT ClickHandler:
closeButton.addClickHandler(new ClickHandler()
{
public void onClick(ClickEvent e)
{
postClosedEvent()
}
});
This assumes a function defined using javascript in the containing page, for instance:
<script type="text/javascript">
var functionDefinedOutside =
function()
{
alert("GOT MESSAGE FROM iframe");
};
</script>
Note: If the iframe contents are loaded from a different domain, you can achieve the same result using postMessage.
IFRAME in the GWT module is defined as:
<iframe src="/temp.jsp"></iframe>
GWT module (Outer class):
public class Test implements EntryPoint {
public void onModuleLoad() {
registerMethod();
}
private static native void registerMethod() /*-{
$wnd.mt = $entry(#test.client.Test::show(Ljava/lang/String;));
}-*/;
public static void show(String value){
Window.alert("Calling from inside IFRAME " + value);
}
}
JSP inside the IFRAME: temp.jsp
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>temp</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
</style>
</head>
<body>
<div id="content">
Holla commo estas from the iframe!
</div>
<script type="text/javascript">
window.alert("inside iframe");
window.parent.mt("passing a value to a parent!!!");
</script>
</body>
</html>
Related
I can't figure out how to get access to the full source of the HTML page including iframes. It should be similar to what we see in DevTools > Elements, but via Electron.
By source I mean either text representation of the DOM (including content of all iframes on the page), or the list of all elements and having a way to get access to their text-representations.
Any help is highly appreciated! Thanks.
If you're just looking to get a string of all the HTML, you can do so via the executeJavaScript API:
const {app, BrowserWindow, dialog} = require('electron')
async function createWindow () {
const mainWindow = new BrowserWindow()
await mainWindow.loadFile('index.html')
const result = await mainWindow.webContents.executeJavaScript("document.documentElement.outerHTML");
dialog.showMessageBox(mainWindow, {
message: result
});
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
For an HTML page like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="./styles.css" rel="stylesheet">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
<iframe src="https://google.com/chrome"></iframe>
</body>
</html>
You'll get a dialog like this:
It is not however possible to just grab DOM elements in the main process that you can manipulate.
I have tried so many URL variations for Flickr and all attempts have failed to load my image gallery into my own webpage.
I am pretty sure its the URL. If I replace the URL with:
"api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"
all works fine to load public photos from Flickr, but to load my own album (URL below), it won't work.
Yes I have a valid API from Flickr. I also checked the script syntax in "jsbin.com" and all of that is good.
Can anyone help resolve this?
Here is the jQuery script:
(function() {
var flickerUrl = "https://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=<removed by edit>&user_id=135938131#N02&format=json&jsoncallback=?";
$.getJSON(flickerUrl)
.done(function(data) {
$.each(data.items, function(i, item) {
var image = $("<img>")
.attr("src", item.media.m)
.attr("title", item.title);
$("<a>")
.attr("href", item.link)
.attr("target", "_blank")
.html(image)
.appendTo("#images");
if ( i === 8 ) {
return false;
}
});
});
})
();
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flickr Image Gallery</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<h1>Natural Scenery</h1>
<br>
<div id="images"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/flickrgallery.js"></script>
</body>
</html>
I am trying to get a PDF in GWT from client side
I am using jspdf for that
Here is my code in GWT client side onModuleLoad
public void onModuleLoad() {
Button btn = new Button("click");
RootPanel.get().add(btn);
btn.addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
callJs();
}});
}
public native void callJs() /*-{
var doc = new jsPDF();
doc.text(20, 20, 'Hello world.');
doc.save('Test.pdf');
}-*/;
}
In my project.html file,
I added these in my header
<script type="text/javascript" src="examples/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jspdf.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
I have downloaded the jspdf and put inside my war folder
Now when i Click on the button I get the error in console:
jsPDF is not defined
Please suggest what I am missing ..
NOTE: If i use the same above code within my project.html page
It works fine
but it doesnt work when i put the same code inside my JSNI method
It seems that <script type="text/javascript" src="jspdf.js"></script> has not been loaded by your browser (404 ?).
Be sure that the jspdf.js file is at the root of you .war (with your project.html)
I am new to jquery mobile, and am having problems getting content I have inserted dymically using pageinit to display on the first time of the form response page. It displays on subsequent refreshes of the page. I also don't want the content to cache.
I need to use querystring values like ?blah=1&blah=2 as I use these in my call to an external json file.
How should I be doing this? If I use rel="external", and setting ajax to false, I have problems with issues on android. So using pageinit in the header, how do I make the dynamically loaded content (in the example, the time in seconds) in the 2nd page display first time round?
I have simplified the problem into test pages below.
Expected behaviour. When you click on the submit button of the form you go through to the 2nd page which should display the no of seconds taken from datetime
Actual behaviour. The seconds/time does not display on the 2nd page until the page is refreshed.
Elsewhere, I have come across the suggestion to put the pageinit code into the div itself, however this has caused the content to cache on android (ie the no of seconds remains the same), so I don't want to do this.
Any ideas on how I should approach this would be much appreciated
Sample code
=======
Page 1 - form
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="/scripts/myinit.js"></script>
</head>
<body>
<div data-role="page" id="page1" data-add-back-btn="true">
<div data-role="content" data-theme="b">
<form action="page_2.htm" method="GET" id="form1" name="form1">
<input type="hidden" name="seconds" value="">
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</form>
</div>
</div>
</body>
</html>
===
Page 2 form response page
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="/scripts/myinit.js"></script>
</head>
<body>
<div data-role="page" id="page2" data-add-back-btn="true">
<div id="job" data-role="content">
</div>
</div>
</body>
</html>
===
custom javascript file called /scripts/myinit.js (included in both pages above)
$('#page1').live('pageinit', function(event) {
var seconds = new Date().getTime();
$('input[name=seconds]').val(seconds);
});
$('#page2').live('pageinit', function(event) {
var querystring = location.search.replace( '?', '' ).split( '&' );
var queryObj = {};
for ( var i=0; i<querystring.length; i++ ) {
var name = querystring[i].split('=')[0];
var value = querystring[i].split('=')[1];
queryObj[name] = value;
}
var seconds = queryObj["seconds"];
$('#job').append("seconds=" + seconds);
});
try changing pageinit by pageshow. i had the same problem and it worked for me
Link to the external file like this:
HTML --
I'm a Link
JS --
$(document).delegate('#external-link', 'click', function () {
$.mobile.changePage('/path/to/file.html', { reloadPage : true });
return false;
});
Setting the reloadPage option for the changePage() function will allow the external page to be refreshed rather than loading the cached version. Since the external page will be refreshed, the pageinit code for it will run when it's initialized and your code should function properly.
Documentation: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html
I'm using Eclipse for the first time, wondering which way to go about templating it? I know a little about tiles and jsp's, zero about databases.
the site:
static header, nav, sidebar, and footer
a few different content jsp's
main question is --> I have one content section with one layout but 100's of varying jsp's...how should I go about this?
thanks
I'm not sure how Struts and databases are related to this, but basically, <jsp:include> is the best what you can get in JSP.
Basic kickoff example of /WEB-INF/template.jsp
<!DOCTYPE html>
<html lang="en">
<head>
<title>${title}</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="header">
header
</div>
<div id="menu">
menu
</div>
<div id="content">
<jsp:include page="/WEB-INF/${view}.jsp" />
</div>
<div id="footer">
footer
</div>
</body>
</html>
And the controller Servlet:
#WebServlet(urlPatterns={"/pages/*"})
public class Controller extends HttpServlet {
#Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String view = request.getPathInfo().substring(1);
String title = titles.get(view); // Imagine that it's a map or something.
request.setAttribute("view", view);
request.setAttribute("title", title);
request.getRequestDispatcher("/WEB-INF/template.jsp").forward(request, response);
}
}
Invoke it by
http://localhost:8080/contextname/pages/foo
and provide a /WEB-INF/foo.jsp file which should represent the content. E.g.
/WEB-INF/foo.jsp
<h1>This is Foo!</h1>
<p>Lorem ipsum</p>