<iframe id="myFrame" runat="server" name="main" width="100%" src="http://www.somewebpage.com/" />
This is simple iFrame I put on my webpage. After I click on couple of buttons on that website, iframe source remains the same. But I want to be able to retrieve the changed source every time I click on buttons, links etc...
How can I achieve this?
Edit: This is the screenshot of my work. When I click on "Git" button, webpage loads on the iFrame. However, when I surf on the website, I want textbox to be updated to the source of the iFrame.
Ok, here is an idea that I test it now and its work. You change the input box after the iframe loads using the onload event of the iframe
<script>
function HasChange(me)
{
document.getElementById("WhereIamId").value =
document.getElementById("WhatIShowID").src;
return false;
}
</script>
and the html
<input type="text" id="WhereIamId" value="" />
<iframe src="page1.aspx" onload="return HasChange(this);" id="WhatIShowID" ></iframe>
You can use also the document.getElementById("<%=myFrame.ClientID>") to get the rendered id. After your iframe loads you update the text box with the current url.
Related
I have two web pages written in VisualBasic.Net:
Upload.aspx
Default.aspx
There is a link in the Default page that opens Upload page in a different window.
In the Upload window I upload a file, and I want to display the name of this file in a textbox, which in turn is in a gridview on the Default page.
I think I want an asyncronous process that won't cause the Default page to refresh, but I don't know how to do this.
I created a very simple example for you. Here is the code of the first page (your Default.aspx let's say):
<html>
<head>
<script>
function ow() {
window.open('w2.html');
}
function update(updatestr) {
document.getElementById('update').innerHTML = updatestr;
}
</script>
</head>
<body>
open window
<div id="update"></div>
</body>
</html>
This page contains a link, which opens a new window (this will be your Upload.aspx page). It also contains a simple function called update, which puts a parameter value as a div html content.
This is code of a second page (your Upload.aspx like):
<html>
<head>
<script>
function update() {
window.opener.update(document.getElementById('txt').value);
}
</script>
</head>
<body>
<input type="text" id="txt" />
<input type="button" value="Update" onclick="update()"/>
</body>
</html>
This page contains a textbox and a button. After a button click, the content of the textbox will appear in a div on the first page. You can do something similar in your case.
I've put a working demo for you.
I've created a form which I want to open in a fancybox (iframe). To prevent bots from filling out the forms I want to use reCaptcha. For reCaptcha I'm using the ASP.net implementation, but the problem also occurs when I'm using the javascript implementation.
Now, the reCaptcha form is showing and working on the page which I want to open inside my fancybox. But when I open the page inside my fancybox, the form is visible but the reCaptcha isn't being rendered.
When I view the source of the page I only see the following:
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=xxxx" width="500" height="300" frameborder="0">
</iframe><br /><textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea><input name="recaptcha_response_field" value="manual_challenge" type="hidden" />
When my page is loaded I cannot see calendar:
When I click on the birthday field of the form it appears, but it does not look as I expect:
The code I use to display in jsp file:
<label for="birthday">Birthday<br/> </label>
<sf:input path="birthday" id="birthday"
pattern="(0[1-9]|1[0-9]|2[0-9]|3[01])-(0[1-9]|1[012])-[0-9]{4}"/><br/>
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
elementId:"birthday",
widgetType:"dijit.form.DateTextBox",
widgetAttrs:{ datePattern:"dd-MM-yyyy", required:true }}));
</script>
So my questions are:
How to make calendar always visible as soon as the form is loaded?
How can I manage with its css, so I could set backgournd and other properties via css file? If it is not possible, then via JavaScript params.
Thanks.
In order the calendar works I had to set the following css class to the html body element:
<body class="tundra">
It helped.
I have an asp.net page in an iframe where all links target _blank
<base target="_blank" />
But I want the form on it to submit to _self (i.e. the iframe where the page is located) when the one button is clicked. The form is an <asp:Panel> with an <asp:Button> control for submitting it.
Where can I set the target for this form? Since there isn't a <form> tag or an <input> tag in the file (ASP.NET makes them when it renders the page), I don't know how to change the target to override my <base> tag.
I'm not sure if I understood you right, but you can set the target in the form tag, like this:
<form method=post action="Page.aspx" target="_self">
I just found this post on the asp.net forums by mokeefe that changes the target by javascript.
I just put it in my page and tried it. I had to make these modifications:
1. I'm using asp tags only, so I have <asp:Button> not <input type="button"> and my onclick has to be the server-side method I'm calling on submission. Therefore I put this new javascript in OnClientClick:
<asp:Button ID="cmdEmailSearch" runat="server" Text="Search"
OnClick="cmdEmailSearch_Click"
OnClientClick="javascript:pageSubmit()"/>
2. I removed the myForm.submit() since ASP.NET renders the page putting the WebForm_DoPostBackWithOptions() javascript in the button's onclick right after it puts my pageSubmit()
<script type="text/javascript">
function pageSubmit(){
// where form1 is the Parent Form Id
var myForm = document.getElementById('form1');
myForm.target = '_self';
}// end function
</script>
I want to upload a file using asp.net so I do not want to post back the page while uploading . How can I do that and is there any way to do it using Ajax .
Make the file upload form target a hidden iframe.
<iframe name="UploadTarget" style="display:none"></iframe>
<form target="UploadTarget" action="postfile" method="post" enctype="multipart/form-data">
<input type="file" name="MyFile">
<input type="submit" name="submit" value="Send me a file">
</form>
The final trick is to add to your response page:
<script type="text/javascript">parent.somecallbackfunction("Here is some data")</script>
To let your parent page ( the one containing the hidden iframe) know that the the file upload has completed.
An iframe can be placed on your page and can contain an input element, type=file. You can manipulate and submit the iframe form via javascript. You can hide the iframe by setting its CSS style to display:none. This is generally known as the hidden iframe method.
Use something proven like SWFUpload and save yourself the time of writing your own client code.