select a part of html page in IExplorer and get html code for this part
zili...@gmail.com
code of this part? I'm using VS 2005 C#. Thanks a lot!
alex
There are several ways to do this, can you be more specific as to how
exactly you plan on accessing IExplorer ??
For example .. From the Code behind of your application or from the
client side. Give me more details on your specific scenario
Alexander
.Net Developer
http://affordablewebdesignsinc.com
zili...@gmail.com
By drag&drop option into my application i want to get a string
contaning a html code of selected part of web-page and a full URL
address of this web-page.
Thanks a lot!
alex
and I haven't seen anyone answer it. So i put a page on my web site
specifically for this topic.
You can view the entire article with a live working sample here
http://affordablewebdesignsinc.com/codesamples/draganddropparse.aspx
Here is the text fo the page for those who would like to read about the
subject here. However for readability and accracy of the code I
recommed you read the article from the affordable web desing, inc
website
Parsing Html From A Web Page With Javascript Drag and Drop.
This subject originally began as a discussion on groups.google.com
where our web developer Alexander Higgins frequently visits to answer
quuestion on the to answer questions regarding web development. In
this Online Group for .NET Professionals, Programmers, Developers,
Students members ask any questions, problems, issues regarding VB.NET,
C# .NET, ADO.NET, ASP.NET, XML, XML Web Services, .NET Remoting,
Crystal Reports .NET, Visual Studio .NET and more.
The Topic
The discussion started when Alexey posted the question (How do i)
select a part of html page in IExplorer and get html code for this
part. (Is it) possible to select a part of html page in IExplorer and
get html code of this part? I'm using VS 2005 C#. Thanks a lot!
Alexander posted the folowing response:
There are several ways to do this, can you be more specific as to how
exactly you plan on accessing IExplorer ??
For example .. From the Code behind of your application or from the
client side. Give me more details on your specific scenario
Alexy responsded:
This subject seems to be a common issue among developers of all
languages and yet the answer has been sought there seems yet to be a
solution. So Alexander Higgins set about discovering a way to address
this Issue.
The Solution:
The solution for this issue involves using some creative javascript,
overriding default browser events and the insertion of Dynamic Iframes
with your common textbox. Lets take a walk through it.
Code for our web page:
<HTML>
<HEAD>
<title>Parsing Html with Drag and Drop</title>
<script language="javascript">
<!--
/* BEGIN Advanced HTML Drag and Drop Parser */
var BaseURL = "../";
/* END Advanced Html Drag and Drop Parser */
//-->
</script>
<script language="JavaScript" src="AdvHTMLLang.js"></script>
<script language="JavaScript" src="ParseHtmlRangeJS.aspx"></script>
<script language="javascript" type="text/javascript">
function registerHtmlDragandDropTarget()
{
document.getElementByID("htmldroptarget").dmxedit = "true";
document.getElementByID("htmldroptarget").toolbar ="";
}
function showparsedhtml(htmlparsercontainer)
{
var dmx_v6=document.getElementById('_'+htmlparsercontainer+'_editor');
var dmx_v5=dmx_v6.contentWindow.document;
var htmlparseroutput=document.getElementById('htmlparseroutput');
htmlparseroutput.innerHTML=dmx_v5.body.innerHTML;
}
</script>
</HEAD>
<body onload="registerHtmlDragandDropTarget();">
<input id="parsehtmlcontainer"
onclick="showparsedhtml('htmldroptarget');"
type="button" value="Parse Dropped HTML" name="parsehtmlcontainer">
<BR>
<textarea id="htmldroptarget" style="WIDTH: 595px; height:225px"
name="htmldroptarget" dmxedit="True"
toolbar="T:BIU;E:SBU;J:LCRF;O:LUOI;C:FB;"></textarea>
</p><br><br>
<div id=htmlparseroutput style="border:2px solid #cccccc;">
<h1>Parsed HTML Out Put</h1>
<p>Drag and Drop or copy some html from another web page and into the
textbox above.
The click the "Show Parsed HTML" button above. The Actual Html Will be
displayed here.
</p></div>
</body>
</html>
How the Drag and Drop Works. (Internet Explorer Required)
The Page load event
When the page first loads we fire some custom javascript that alters
the default behaviors of our drop targets. By default, the
<textarea></textarea> and <input /> are native drop targets across all
browsers. However, the default behavior when the "ondrop" event fires
is to retrieve only the inner text of the dragged or copied web page.
Since we are trying to get the source html we will have to alter their
behaviors.
We have limited access to what behaviors we can alter an how we can
alter them. They have been standardized, tested and retested by the
original browser programmers before they ever hit the market. For
security reason, we have a predifined limitation of what we can work
with. The work around? An Iframe. By default, every web page itself
is a drop target. Try it your self, create an Iframe in an HTML page
and drag something from another page into. the draw back of the Iframe
is that we the ondrop event fires, you are redirected to the URL where
the data orginated.
The solution. A hybrid combination of both. When our onload event
fires, we will over ride the default behaviors of our textarea by
attaching events and event listeners via attachEvent and
addEventListener. We will also predefine some functions for these
events. But before do this, we will insert an Iframe into our our
textarea and override this some od the iframes poperties
What you need to Know
We add an iframe inside of drop target and format our events. Then we
configure our Iframe to call functions and raise events in our parent
window. When our html is dropped into our Iframe will prevent it from
redirecting. In a normal situation, the Ifame would stay blank iwth
know changes made if we prevent the redirect. So what we will do, is
extract the data from the iframe as the even is raised by creating a
text range and cloning the range. This is perfomed using the
execcommand function.
Once we have create the range and copied it, before we call the cancel
our on bubble event, our iframe will commicate sending it the original
copied html range. Javascript in our parent.window will accept that
data and insert it into the textarea that we originally defined as our
drop target.
Once we set the innerhtml of our drop target with that of the
iframe.body.innerhtml, we can then cancel any event propogation in our
iframe, and prevent our page from redirecting. We can now access the
innerhtml of our drop target as a javascript object and manipulate
other objects on our page.
In our Parsing HTML using Javascript Drag And Drop example below, we
first use javascript to retrieve the innerhtml property of our drop
target. We then display the rendereed html by assigning this data to a
our parsed HTML Div tag. To Display the original html source we simply
copy the drop targets innerhtml to a textarea that we have performed
any default browser modifications on.
Testing it out
Directions:
Open a new browser window and go to your favorite web site.
Highlight any area of that page that you want.
Then either drag the highlighted area and drop it on the target or copy
the highlighted area and paste it on to the target HTML Drag and Drop
Target.
Click the button labeled "Parse Dropped HTML".
Scroll down to view the results.
This source code is protected by internation copyright. To request a
copy of the source code or permission to use the code from this web
server, simply contact us as request permission here.
http://affordablewebdesignsinc.com/codesamples/nj_web_development_contact_form.aspx
© Affordable Web Designs, Inc. Bricktown, NJ 08723 All Rights Reserved
Be sure to subscribe to our newsletter for future articles where we
will explain how to use this code to create a content management system
with a built in WYSIWG website editor.
HTML Drag and Drop Target -- Drag and drop or copy and past here.
The parsed Results
Parsed HTML Out Put
Drag and Drop or copy and paste some html from another web page into
the textbox above labeled HTML Parser Drag and Drop Target. Then click
the "Show Parsed HTML" button above. The Actual RenderedHtml Will be
displayed here.
The Dragged HTML Source code
<h1>Parsed HTML Out Put</h1>
<p>
Drag and Drop or copy and paste some html from another web page and
into the textbox above labeled HTML Parser Drag and Drop Target. Then
click the "Show Parsed HTML" button above. The actual source Html will
be displayed here.
</p>
About this developer
Alexander Higgins is a .Net Developer specializing in creating
customized applications for projects with complex developement
requirements. Past projects include the first fully integrated
business podcasting solution TimbreMedia.com, which ofters a business a
sepate blog, informational microsite, Podcast, and RSS feed solution
with a fully integrated back end content management and publishing
system.
Currently Alexander is working on the SeniorsA2Z.Com directory for
senior citizens and those businesses offering services to Senior
Citizens. This project is slated to be completed early next month and
allows users to browse and search services by location, with realtime
distance calculation from the visitors search location to each
directory listing. The project also integrates the Google Maps and
Yahoo Maps Api to display point to point maps, and driving directions.
Additionally, it offers marketers and advertisers the ability to market
their services to specifica demographical communites within a 15 mile
radius of their target demography.
Learn more about our design and development services.
Click here, to contact one our website experts.
http://affordablewebdesignsinc.com/codesamples/nj_web_development_contact_form.aspx
zili...@gmail.com
I have readed your article, you did very nice work, and seems that it's
work perfectly. But i don't understand how you did it. Can you share a
"ParseHtmlRangeJS.aspx" code? And additional question is were i can
find a Iframe in Visual Studio 2005?
Thanks a lot!