asp:LinkButton doesn't work from inside an iframe - javascript

Suppose that I have an ASP.NET page that is intended for other sites to render inside of their <iframe>. Suppose further that my page includes some server-side <asp:LinkButton> controls, which get rendered as <a href="javascript:__doPostBack(...)"> links.
I would be happy if _doPostBack() would execute within the iframe, but it does not--Instead I get "_doPostBack not defined" error in the console. I presume that is because it is trying to execute it on the outside page, because it is an href="javascript:..." link and not an ordinary DOM event.
How can I overcome this without changing away from a LinkButton? Is there a better way to run the server-side code I need for clicking the button?
EDIT: I added an the test
and clicked on it, and I got the title of my outer page, not the title of my page in the iframe.

I might not be getting the question right...but the link button in your iframe should work fine only inside the iframe context. So anything in the code-behind of the iframe .aspx will work as regular.
Now if you want the link_button in iframe to interact with the parent page the nope.
What you are trying to do is a Cross-domain scenario. I doubt there's any way you might be able to accomplish it and that's due to security reasons. I was looking for something like that as asked here.
If you own both the websites then you might want to check if WebService is of any use.

I was pretty curious to try it myself, so I created a test application and I was easily able to get a postback within the IFrame.
Now a little clarification if a postback is happening inside an IFrame, you will even see the effects within the frame bounds (unless programmed other wise using some client script). Now to your issue there is no possibility of you invoking the parent __dopostback event, under normal circumstances (but you may like to see this link for a probable thing that might be happening at your parent page).
At times as a security measures the javascript is disabled on individual IFrames (the feature is readily available with HTML5). There is a good possibility that you may be dealing with a similar situation. In that case you do not have any control over the functioning, unless you fall back to simple HTML forms and post it to a different ASP.net page.
Based on our discussion below I would suggest you to use simple HTML hyper link in your page, unless you can change the code of the parent page. If postback is desirable then you can make use of cross page posting (as I already mentioned) and from that page redirect back to your current child page.
One of these codes should work for you:
Link Text
OR
Link Text
OR
Link Text
OR
Link Text
If none of the above codes works for you then you should consider putting a submit button instead of hyperlink.
Hope this helps.

Also curious, I tried to replicate your issue but the post back worked fine inside an iframe. It may sound silly but can you confirm that the page works outside of an iframe?
Other suggestions:
Try different browsers
Disable browser extensions
Try creating a basic HTML page on your local pc with an iframe to your website and see if it works that way. That could tell you if the parent page is the culprit.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body style="background: #ccc">
<h1>My HTML Page</h1>
<iframe src="http://MyWebsiteUrl" width="400" height="400" />
</bod>
</html>

Well I had the same problem. Ended up adding asp:imgButton controls with an OnClick="" aspx.cs code behind handler.
The handler their click event called was the one I wanted my linkbutton to call but wouldn't in Safari 7.0.1 on Mac. I put an OnClientClick="return mylinkbuttonHandler()" client side handler in javascript that just invoked my hidden (because they have no image assigned) imgButton's click event; the javascript itself looked like the below:
<script language="javascript" type="text/javascript">
// Fake out Safari by creating imgButtons that fire the linkbutton code behind events
function saveButtonLogic() {
var buttonId = document.getElementById("hiddenSaveButton");
buttonId.click();
return false;
}
function submitButtonLogic() {
var buttonId = document.getElementById("hiddenSubmitButton");
buttonId.click();
return false;
}
function clearButtonLogic() {
var buttonId = document.getElementById("hiddenClearButton");
buttonId.click();
return false;
}
</script>
Hey, it's ugly but it worked great.

Related

Clicking element inside an iframe using jquery or javascript maybe AJAX

After going through numerous threads on numerous forums none of them come close to a solution to what I want to accomplish.
Here is want I want to accomplish:
I have a page on an iframe and I want to click a on a div tag inside that Iframe.How do I go about it .i have seen scripts that have mouse event emulator but I do not know how to use them.
Site 1 = http://site1.com/page.html
Site 2 = http://site2.com/abc.html
code for site 2:
Code:
<div>
<div>
<div attribute="text" onClick="somefnc();">
james bond
</div>
</div>
</div>
code for site 1:
Code:
<iframe src="http://site2.com/abc.html></iframe>
What I would like to do is to have a script that automatically click on james bond (the text within the div) bearing in mind I have no control over http://site2.com/abc.html
Preferably list the methods one could accomplish this and where can i learn such type "DOM" (javascript mainly dealing with mouse events) for free.
Any references are highly appreciated.A baby step walk through the code is highly appreciated.
I am noob in this area.
What I a have tried so far:
try 1: javascript
.click();
error of try 1:cross domain issues
try 2: mouse emulation
error of try 2: noobieness code to complex for me
please help.
guessing solutions
mouse emulation like scripts
some neat jquery code
AJAX ,PHP maybe
Unfortunately since you are dealing with two sites on different domains, I don't think it's possible.
Mouse Emulator
Mouse emulator scripts probably dispatch a click event on the page, but unfortunately dispatchEvent won't work for iframes on different domains. Can you post a link or code what you tried with mouse emulation?
If you tried:
document.elementFromPoint(x, y).click();
Based on this Stack Overflow post, the click won't work on a cross-domain iframe:
How to simulate a click by using x,y coordinates in JavaScript?
Quoted: "For instance, it can't be used to trick a cross-domain iframe document into thinking it was clicked."
If you tried:
el.dispatchEvent("click");
Then you need to get the element el somehow from within the iframe contents. Since the iframe is in another domain, you will be blocked from trying to get the iframe contents (using either JQuery or DOM).
var doc = iframe.contentDocument || iframe.contentWindow.document; // security error due to cross-domain
doc.getElement ...
(By the way, it would be easier to use jQuery to get the element since site2's code doesn't have an id on the element, and DOM doesn't provide an easy way to get elements besides by id or class)
JQuery
JQuery provides a function to get the contents of an iframe. Assuming that would work, then you could find the element in the iframe contents and trigger a click on the element. Unfortunately this will only work if the iframe is on the same domain.
var el = $("iframe").contents().find("div[attribute='text']"); // security error due to cross-domain
el.trigger("click");
AJAX, PHP
I can't think of a way to click something through AJAX or PHP. Using AJAX, you could potentially make a GET request to site2 to retrieve the contents of abc.html and insert that on your page, but again, you would have cross-domain issues performing a GET request to another domain from the browser. Instead, you could make a server-side request to get the abc.html (using PHP or other server side code), then you wouldn't have the cross-domain issue. You'd still need to request any css and whatever javascript file where the somefnc() function lives and whatever else it depends on, then somehow inject all that on your page and you still wouldn't actually be interacting with site2, just copies of its files. This would be hacky and tricky to get working, and it really depends on what site2's somefunc() does.
Other options:
Depending on what you need to do and what site2's somefnc() does, you could try to duplicate the same functionality instead of doing it through clicking on an iframe.
If you can work with site2, you could try postMessage to send a message to site2:
http://javascript.info/tutorial/cross-window-messaging-with-postmessage

Redirect to another page without loading current page in jquery

I want to redirect to another page from 1 page without showing contents of that page using javascript/jquery.
So for example I would be either typing or coming from a search engine to a page on my website say www.mysite.com/aaa/ and I should get redirected to www.mysite.com/bbb/ without showing the contents of www.mysite.com/aaa/.
The server side is asp.net and I can do this using Response.Redirect but I do not want a code change.
From my limited knowledge, I cannot use document.ready or window.load as both will load the contents of the page in the browser before redirecting.
I am not aware of any other thing which would help me achieve this. Tried hard searching but could not get anything useful.
I got something here. I can have this in the header but right at the top of the header might not be possible. Plus the answer is not looking very convincing. However, can try it out and update this question with the findings.
Please help!
Thanks in advance!
When the the web browser engine reads an HTML document and identifies a script element, it immediately invokes the JavaScript interpretator and executes the code. So, if your document starts with a JavaScript which redirects away from the page, the client shouldn't be shown the remaining document. Something like this could work:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
//using "replace" removes the current page from browser history
location.replace('page_b.html');
</script>
Also, if there is something on the current page that should not be displayed to the client while the redirect is in process - you can inject some additional CSS, like
<style type='text/css'>
body {display:none}
</style>

How to stop page load in html static page

Is there in HTML (javascript) or other static html tech
can:
Stop page loading (if browser does not download yet)
Stop page rendering (from where the code placed)
Stop javascript executed (from where the code placed)
Simply put, is there a code like
<script>window.StopWhateverBelow()</script>
To let browser totally ignore whatever below the code.
UPDATE
I understand the browser may already download the whole thing. What I want is, from the code, page should stopped, for example: if I put the code just after <body> visitor should see blank page, if I put the code in middle of the page, page should be just half like you pressed ESC
ANSWER
As bukko suggested, comments done the trick. But not full, just half
If you put <!-- in html page, the rest will be ignored. And in Javascript
document.write('<!--');
Done the trick.
For about make sense:
Here is how this code make sense: when you page load some offpage script, the script is dynamic. When the script code found something wrong (or match some condition), you have one more option to stop the page from rendering, loading, download...
You could do window.stop(); for most browsers besides Internet Explorer. For IE, I had to use document.execCommand('Stop');
If you already have html comments on your page, #bukko's solution doesn't fully work. Stuff after the html comment will get rendered normally.
Something else to try is:
document.write('<script type="text/undefined">')
The rest of the document gets interpreted as part of the script tag, and because the script isn't text/javascript, it gets ignored.
Worked for me, thought I'd share it.
Edit
I've seen the script trick not work in Chrome.
This does work, but I have not done extensive browser testing:
document.write('<style type="text/undefined">')
window.stop(); //works in all browsers but IE
if ($.browser.msie) {document.execCommand("Stop");}; //works in IE,
document.execCommand works in IE, however it does stop some of FF, NS and some other browsers' functions. Like displaying GIF's animation for example. Using "if browser is IE" makes these two codes work perfectly in all browsers.
Well, there is:
<!--
terminated by
-->
for HTML, but scripts will ignore this.
What you are asking makes no logical sense. Simply for two reasons:
Data is ALREADY sent to the user (HTML / JS) so even tho if you COULD hide content, the data would sitll be there for a user to see (if they view source for instance).
Why would you stop 'execution' of a page? It loads simple html structure and reults in a visual display, you should focus on the server site (php for instance) to hide or not send the content in the first place.
If you want to visually hide elements tho, you could use CSS styles (hide divs or the like) with simply adding style="display:none;" to a div like so:
<div style="display:none;">
This text will be downloaded by the user, but hidden from view due to CSS inline style
</div>
If you want to add commenting (thats just for your reference), then use comment formatting:
<!-- this is a comment and will not show up to a user -->
Reference for comments: http://htmlhelp.com/reference/wilbur/misc/comment.html
put window.Stop() wherever you want to stop the page from getting renderred
You could also hide the body like that:
var style = document.createElement("style");
style.innerHTML="body { display:none !important; }";
document.getElementsByTagName("HEAD")[0].appendChild(style);
HTML is static content so the server reads whatever you have written in the file unless you comment it out. For a dynamic file like what you are asking for you need to use php which can do this type of thing.
Just not much related to the question, but I thought it may be useful for some persons. If you want to jump to other page during page loading use window.location = "somepage.html"; or you can redirect users to the previous page: window.history.go(-1); Useful in JavaScript conditional statements
If you are using ASP or PHP, HTTP protocol automatically stops but HTTPS protocol don't stop automatically.
To stop it use:
In ASP:
dim r= accept.secure.protocol
r.onload=window.callback('c')
//to firefox,opera,safari
new clientObject(r).access()
// to chrome,ie
forEachElement(a==null);
PHP code:
$a.window ;
All this scripts sends the browserstring "elementcast" by post method
The stop methods can break things that have already started to load.
If you want to load everything above a certain point and skip everything below a certain point:
<p>Everything works above this point.</p>
<pre style="display: none !important;">
<p>As long as the PRE tag remains open,
nothing works below this point</p>
<script>document.write('Nope');

How to block pop-up coming from iframe?

I'm embedding page that has an exit pop-up. When you close the page, it automatically launches a pop-up window.
How to disable pop-ups coming from the iframe on exit?
If you are wanting to block something like POP up ads or something coming from a website you are showing in an IFRAME - it's fairly easy.
Make a framefilter.php and javascriptfilter.php which your iframe points to.
You can modify it to meet your needs such as the onload blah blah and etc.
But as/is - it's been working fine for me for quite a while. Hope it helps.
Replace your standard IFRAME HTML with this:
<IFRAME SRC="http://www.yourdomainhere.com/framefilter.php?furl=http://www.domainname.com" WIDTH=1000 HEIGHT=500>
If you can see this, your browser doesn't
understand IFRAMES. However, we'll still
link
you to the page.
</IFRAME>
Framefilter.php
<?php
//Get the raw html.
$furl=trim($_GET["furl"]);
$raw = file_get_contents($furl);
$mydomain="http://www.yourdomainhere.com/";
//Kill anoying popups.
$raw=str_replace("alert(","isNull(",$raw);
$raw=str_replace("window.open","isNull",$raw);
$raw=str_replace("prompt(","isNull(",$raw);
$raw=str_replace("Confirm: (","isNull(",$raw);
//Modify the javascript links so they go though a filter.
$raw=str_replace("script type=\"text/javascript\" src=\"","script type=\"text/javascript\" src=\"".$mydomain."javascriptfilter.php?jurl=",$raw);
$raw=str_replace("script src=","script src=".$mydomain."javascriptfilter.php?jurl=",$raw);
//Or kill js files
//$raw=str_replace(".js",".off",$raw);
//Put in a base domain tag so images, flash and css are certain to work.
$replacethis="<head>";
$replacestring="<head><base href='".$furl."/'>";
$raw=str_replace($replacethis,$replacestring,$raw);
//Echo the website html to the iframe.
echo $raw;
?>
javascriptfilter.php
<?php
//Get the raw html.
$jurl=trim($_GET["jurl"]);
$raw = file_get_contents($jurl);
//Note, if trickyness like decode detected then display empty.
if(!preg_match("decode(", $raw)){
//Kill anoying popups.
$raw=str_replace("alert(","isNull(",$raw);
$raw=str_replace("window.open","isNull",$raw);
$raw=str_replace("prompt(","isNull(",$raw);
$raw=str_replace("Confirm: (","isNull(",$raw);
//Echo the website html to the iframe.
echo $raw;
}
?>
Quite an old ask, but I thought I'd offer a newer solution since this is the top result in google.
If you want to block an iframe from opening windows, you can use the new HTML5 "sandbox" attribute on your iframe.
https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe
This should keep it from doing anything (except running javascript which may be required for the page to function correctly):
<iframe sandbox="allow-scripts" src="your/url/here"></iframe>
I don't think this is possible.
first (and most importantly), if the iframe is in a different domain, you can't change its DOM - such as the onunload handlers. If this is the case, the other two issues are moot.
second, even if you could, you'd have to remove the listener in some way. If the listener is loaded via window.onunload, that would be simple; otherwise, not so much.
third, in the long term this would lead to the same arms race as the frame-busting-busters
The only possibility I see is non-technical in nature: check with whoever runs that site inside the iframe if they could make a special page for you, one without such onunload popup. In most cases, either
a) some special arrangement can be made (although not always for free), or
b) removing the functionality would be a violation of the ToS, in which case you'd have to look for someone else providing similar functionality, without the pop-ups (and realistically, most services have more than a single provider)
Actually, this is possible. Well at least in many cases. Often, the code in the iframe will be running something like top.window.open(...) to open a pop-up. You can redefine the window.open method so it still exists, but doesn't open a window. E.g.:
`
window.alias_open = window.open;
window.open = function(url, name, specs, replace) {
// Do nothing, or do something smart...
}
`
If you still want some pop-ups to open, you can whitelist urls within the body of window.open, and call alias_open as needed.
Setting the sandbox attribute on the IFrame element should work.
I'm not sure if this would work but you could try double Iframing. Iframe the site in a free blogger account, then iframe the blogger account with a delay loading code. so the popup will occur before the page is loaded let me know if it works.
Use a modern browser - they all come with decent pop-up blocking capabilities

How to manipulate a DOM tree before it is displayed on screen ? ( javascript, jquery, ...)

The problem is simple, but can't figure out a solution. Many thanks for those who helps.
I want to modify a web page (DOM tree) before it is displayed on screen.
I understand that the DOM tree is fully loaded in memory before being processed.
Do any of you knows a way to process this fully loaded DOM tree while it is on memory
and then let it be displayed with its new structure ?
The reason i want to do that, is because i'm working on an addon that is adding content to an existing web site.
added-> Just need to mention that the existing web site is not mine, so i can't use php to modify the website content is not mine.
But right now, the web site is displayed without the addon content
and you see the content coming after 1 second (because i append the content after website is already displayed), so you see the website content moving.
Thanks for helping.
It's not very difficult. Just hide the body using CSS and on the onload-event of the document do your manipulation and show the body.
Short example:
<html>
<head>
<title>example</title>
<style type="text/css">
<!--
html.scripted body{display:none;}
-->
</style>
<script type="text/javascript">
<!--
//set class for html-element, so the css-rule above will be applied to the body
document.getElementsByTagName('html')[0].className='scripted';
//on page load
window.onload=function()
{
//do the manipulation
document.body.appendChild(document.createElement('em')).appendChild(document.createTextNode('dynamic content'));
alert('manipulation done');
//show the body
document.body.style.display='block';
}
//-->
</script>
</head>
<body>
static content
</body>
</html>
In regard to Brad's comment below you may consider if there may be other ways. As the real issue seems to be the moving content, it could be possible to place a static placeholder where the dynamic content will appear later.
You mention PHP in your tags, so why not build your document server-side? Then, it doesn't matter.
If you must do this client side, then I also wouldn't worry about this. Web pages are rendered progressively anyway. Maybe you have a fast computer and a quick connection to your servers, but I guarantee you that most of your users do not.
Just add some code to the bit where the DOM is ready to make your page enhancements. Relevant: Javascript DOM ready without an entire framework
The only way to manipulate the DOM before it's loaded is by using a pre-processor like php.
Javascript can only manipulate the DOM after it's loaded.
For any further help beyond that you would have to provide a more specific example :-)
I finally found a solution.
I make the addon looking at web page navigation. In fact, it looks at url changes so that I know the user is moving to a different location (therefore I know I have to do something before I even got the 'Load' event of the web page).
Then I just try to access an element (that I know will be in the DOM, like the header) using a loop. Then when the element appears (before the 'Load' event) I insert the code and stop looping/listening.
If anyone need more details of how it is all done, I'll gladly answer your question.
Thanks.

Categories

Resources