I have a html page.
html page has a iframe.
when I submit the form inside iframe, returned result is displayed inside that iframe.
How to display that result in parent of iframe??
<script type="text/javascript">
$(document).ready(function () {
$("#test").load(function (e) {
var htmlFromServer = $(e.target).contents().find("html").html();
});
});
</script>
<iframe id="test" src="HTMLPage1.htm"></iframe>
All you need to do is handle the onload event of the iframe. This event is triggered when the iframe receives response from the server.
Related
I want to remove the dependency of Iframe from my application. What are the possible way I can call a different application URL other than using iframe, object or html embeded variable.
I am trying something like this.
<body>
<a class="ajax" href="http://www.google.com">
Open in Modal Window
</a>
<script type="text/javascript">
$(function (){
$('a.ajax').click(function() {
var url = this.href;
var dialog = $('<div style="display:none" class="Waiting"></div>').appendTo('body');
dialog.dialog({
close: function(event, ui) {
dialog.remove();
},
modal: true
});
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.removeClass('Waiting');
}
);
return false;
});
});
</script>
</body>
sorry can't comment
assuming there's no no anti CSF or similar measures on the target website you can use JavaScript ajax
or do it server side by grabbing the site
for better help describe what you're trying to archive what you did providing sample code if possible
With HTML5, is there any way in IE11/Edge to populate a sandboxed iframe (<iframe sandbox></iframe>) with HTML other than using a src url? I am looking for a solution like srcdoc which works with all other modern browsers.
Using src with a data URI is not an option according to Microsoft as it "cannot be used [to] populate frame or iframe elements." Surprisingly, this does works for me in Edge but only for data URIs with less than 4096 characters.
All other options that I have found, e.g. in Alternatives to iframe srcdoc? and Html code as IFRAME source rather than a URL do not work for a sandboxed iframe.
Assuming usage of <iframe sandbox="allow-scripts"> is desired or acceptable, a possible workaround would be using window.postMessage() with the following setup:
index.html:
<!doctype html>
<html>
<body>
<iframe onload="connectIframe()" sandbox="allow-scripts" src="iframeConnect.html" name="srcdocloader"></iframe>
<script>
var SRCDOC_HTML = '<html><body><script src="https://code.jquery.com/jquery-3.2.1.js"><\/script><script>console.log("loaded srcdoc and dependencies", jQuery);<\/script><h1>done!</h1></body></html>';
var loaded;
function connectIframe (event) {
if (!loaded) {
loaded = true;
window.frames.srcdocloader.postMessage(SRCDOC_HTML, '*');
} else {
onloadSrcdoc();
}
}
function onloadSrcdoc () {
// ...
}
</script>
</body>
</html>
iframeConnect.html:
<!doctype html>
<script>
window.addEventListener("message", handler);
function handler(event) {
if (event.source === window.parent) {
window.removeEventListener("message", handler);
document.write(event.data);
document.close();
}
}
</script>
Note that the iframe's onload event will be triggered two times. The second time will be after the srcdoc html and all its dependencies got loaded.
I have a large application that I want to convert from NATIVE to IFRAME sandbox now that NATIVE is deprecated. The general flow of the application is as follows: The user fills out a form on the beginning page and presses a Begin button. The beginning page is then hidden, and based upon values from the first page, the user is then shown a new page. My problem when using IFRAME is that the new page is never shown. It works as expected in NATIVE mode. I have created a simplified script that exhibits the problem. Please help me understand what I am forgetting or doing wrong.
Code.gs
function doGet() {
Logger.log('enter doget');
var html = HtmlService.createTemplateFromFile('BeginHeader').evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
function include(filename) {
Logger.log('enter include');
Logger.log(filename);
var html = HtmlService.createHtmlOutputFromFile(filename).getContent();
Logger.log(html);
return html;
}
Javascript.html
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
<script
src="https://apis.google.com/js/api.js?onload=onApiLoad">
</script>
<script>
function showForm(hdr) {
console.log('enter showform');
console.log(hdr);
console.log('hiding first page');
document.getElementById('beginDiv').style.display = 'none';
var el = document.getElementById('recordDiv');
el.innerHTML = hdr;
console.log('showing new page');
el.style.display = 'block';
}
function oops(error) {
console.log('entered oops');
alert(error.message);
}
</script>
<script>
$(document).ready(function() {
console.log('begin ready');
$("#beginForm").submit(function() {
console.log('enter begin submit');
//console.log('hiding first page');
//document.getElementById('beginDiv').style.display = 'none';
console.log('including page 2');
google.script.run
.withSuccessHandler(showForm)
.withFailureHandler(oops)
.include('Page2');
});
});
</script>
BeginHeader.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="beginDiv" style="display:block">
<p>Click on Begin. </p>
<form id="beginForm">
<input type="submit" value="Begin">
</form>
</div>
<!-- results of content being filled in -->
<div id="recordDiv"></div>
<?!= include('Javascript'); ?>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<body>
<p> This is page 2. </p>
</body>
</html>
There is no point in ever using a button of the "submit" type, unless you want to force the form to make an HTTP Request, and reload the application. That's what a "submit" type button does. It causes the page to be reloaded. The "submit" type button is meant to work together with a form in a certain way. It causes a GET or POST request to happen. That's what the problem is. So, you'll need to reconfigure things a little bit.
Just use a plain button.
<input type="button" value="Begin" onmouseup="gotoPg2()">
I created a gotoPg2() function to test it:
<script>
window.gotoPg2 = function() {
console.log('enter begin submit');
//console.log('hiding first page');
//document.getElementById('beginDiv').style.display = 'none';
console.log('including page 2');
google.script.run
.withSuccessHandler(showForm)
.withFailureHandler(oops)
.include('Page2');
};
</script>
If you use that, they you don't need the $(document).ready(function() { etc. code anymore. And, if you don't need that code, then you don't need to load jQuery.
Unless you are using jQuery for other things, then you don't need:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
The NATIVE mode was probably blocking the intended usage of the "submit" request. That's why the code in NATIVE was working. IFRAME allows things to work as they are built and intended to work, which means that the page was probably trying to be reloaded, and an error was occurring. I was getting a 404 page error in the browser console.
<iframe id="iframe" style=" width:100%; height:500px" src="other.jsp" frameborder="0" name="myone">
<html>
<head>
<script>
$(function() {
$("#adduser1").click(function() {
alert("hiiii");
$('#iframe').attr('src', 'adduser.jsp');
});
});
</script>
</head>
<body>
<input type="button" name="AddUser" id="adduser1" value="AddUser"/>
</body>
</html>
</iframe>
here i want to load same iframe (its already loaded with other.jsp ) with other jsp adduser.jsp on triggering of inside event of same iframe
its alerting with 'hiiii' but not loading with jsp page
You should not use
$('#iframe').attr('src', 'adduser.jsp');
inside the self iframe. Use
window.location = 'adduser.jsp'
Looking at your code, it should work and it works for me.
The constraint may be the path of the file.. If that is not the case.
Please try to reload the your iframe.
//Reload iframe
$('#iframe').attr('src', $('#iframe').attr('src'));
Just try this... this may help you!!
DEMO...
You are trying to load the iframe from a button which itself is inside the iframe, it will never work that way. You should use window.location for this
$(function() {
$("#adduser1").click(function() {
window.location = 'adduser.jsp'
});
});
Hope this helps :)
I need to make a parent iFrame on domain A go fullscreen from its postMessage event handler which gets triggered by a postMessage from the window in domain B. I have the postMessage communication setup perfectly. The "allowfullscreen" attribute is set on the iframe too. But the requestFullScreen() method seems to silently quit. After searching I found that due to security reasons, requestFullScreen works only on event handlers for events like mouse clicks,
keypress etc. I tried forcefully executing a click on the iFrame using jquery click() and it comes into the click handler too but the requestFullScreen doesn't work. I tried clicking on the iFrame directly and it goes fullscreen.
How do I make this work?
Here's my code - for the parent on domainA.
I have made sure that the post message handler is executed when my child on domain B posts a message
<!DOCTYPE HTML>
<html>
<script type="text/javascript" src="jquery.js"></script>
<script>
var container;
$(function(){
container = $('#parentFrame')[0];
container.addEventListener("click",goFullScreen);
window.addEventListener("message", receiveMessage, false);
});
function receiveMessage(event)
{
/* Use this code to restrict request from only one particular domain & Port!
Port not needed in this case*/
if (event.origin !== "http://myChildDomain.com")
{
return;
}
/*Retrieving relevant variables*/
var message=event.data;
var source=event.source;
var origin=event.origin;
//Forcefully generating a click event because fullscreen won't work when directly requested!
container.click();
}
goFullScreen = function (){
if (container.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
container.mozRequestFullScreen();
} else if (container.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
container.webkitRequestFullScreen();
}
}
</script>
<body>
<iframe id="parentFrame" src="http://myChildDomain/child.html" width="804" height="600" frameborder="0" scrolling="no" allowfullscreen style="border: 5px solid #00ff00">
</iframe>
</body>
</html>