Question

What I really need is a function like the hover-element in Firebug, where we can get the selected HTML.

In our program we will load an URL, and that URL will open in an iFrame. Here we want to hover the elements, and when the user clicks on a certain element, we want the HTML source for that particular element.

So:

• Can you interact (get hovered html) with the iFrame, so you get the selected HTML?

Answer 1

Here is something like you wanted. It will run in a div called sourcecode.

However you can put the sourcecode div in an iframe if you want.

<div class="sourceCode">
</div>
<script type="text/javascript">
    (function ($) {
        $.fn.outerHTML = function () {
            return $(this).clone().wrap('<div></div>').parent().html();
        }
    })(jQuery);

    $(document).ready(function () {
        $("p,div").click(function () {

            var thisobject = this;
            var sourcecodes = $(thisobject).outerHTML();
            sourcecodes = htmlEscape(sourcecodes);
            $(".sourceCode").html(sourcecodes);

        });

    });

    function htmlEscape(str) {
        return String(str)
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
    }
</script>