0

I want to disable all links inside an iFrame.

The iFrame is actually the preview frame for the markItUp text editor. I have tried the following based on another Stack Overflow answer but it does not work for me:

$(".markItUpPreviewFrame a").live('click', function(e) {
    e.preventDefault;
    alert("You twat! This is a preview, where do you think you're going?");
    return false;
});

Below is a rough outline of the HTML with the markItUp iframe:

<div id="markItUpMarkItUp" class="markItUp">
<div class="markItUpContainer">
    <div class="markItUpHeader"></div>
    <div class="clear"></div>
    <textarea id="markItUp" class="markItUpEditor" name="bodyText""></textarea>
    <div class="markItUpFooter"></div>
    <iframe class="markItUpPreviewFrame">
        <html>
            <head></head>
            <body>
                links in here...
            <body>
        </html>
    </iframe>
</div>

When I click on the link, it seems to ignore my jQuery code (I do not get the alert) and loads the page anyway.

Gilles 'SO- stop being evil'
  • 104,111
  • 38
  • 209
  • 254
Mike Mike
  • 1,125
  • 3
  • 13
  • 19

2 Answers2

0

You need to attach the click handler to the document in the iFrame, this question has an answer that shows how to do that (the last answer)

Community
  • 1
  • 1
danwellman
  • 9,068
  • 8
  • 60
  • 88
  • I tried the following, though it is still the same result: `$(document.getElementById('markItUpPreviewFrame').contentWindow.document).live('click', function(e) { ..prevent stuff in here });` note: i also added the id 'markItUpPreviewFrame' to the iframe.. – Mike Mike May 02 '12 at 11:01
  • Could it be because the iframe is not added until later (after the preview button is pressed)?.. So that when the above code is executed, the markItUpPreviewFrame does not exist... – Mike Mike May 02 '12 at 11:08
  • The live() method should cater for that, although it is recommended to use the on() method now for all event handling. Try Sthe's solution above? – danwellman May 02 '12 at 12:11
0

Try this:

   $(document).ready(function(){
        //Make sure the iframe is done loading before you attach an event
        $(".markItUpPreviewFrame").load(function(){
            // Get the body element
            var frameBody = $(".markItUpPreviewFrame").contents().find("body");

            // Get all links inside the BODY tag
            $('a', frameBody).click(function(e){
                    //Disable all default actions       
                    e.preventDefault();
            });
        });
    });
Sthe
  • 2,575
  • 2
  • 31
  • 48
  • Hi, i gave it a shot but it doesn't work. I added an `alert("hi");` after the `$(".markItUpPreviewFrame").load(function(){` line and it did not get executed. I pressed the preview button, and nyet. The iframe displayed as normal and the links are still clickable. – Mike Mike May 02 '12 at 12:20
  • Do you load your iframe dynamically? (in case I might have missed that). You could replace `$(".markItUpPreviewFrame").load(function(){` with `$(".markItUpPreviewFrame").live('load', function(){`. I tested this example and it worked for me. Maybe just check the Error Console as well and see if you get any errors. – Sthe May 02 '12 at 12:50
  • Yeah i do load it dynamically. That didn't work either. I do get an error in the Error Console and that is `$ is not defined ` but i'm not sure that it is related. Very bizarre because the code you provide looks like it should work! – Mike Mike May 02 '12 at 13:13
  • It sounds very related to me, because if `$` id not defined, you can never be able to use jQuery at all. Does any of your jquery code work? On that page that is? If it doesn't, try rewriting the ` – Sthe May 02 '12 at 13:24
  • Which page do you mean? The parent, or the page in the the iframe? Because jQuery is working and doing a bunch of stuff already in the parent (the page containing the iframe). There are no scripts in the page that is within the iframe. – Mike Mike May 02 '12 at 13:28
  • If you have the above code on an external javascript file, just make sure you only include it AFTER including the jQuery library like so: ` – Sthe May 02 '12 at 13:30
  • did a search for `noConflict()` and it doesn't appear anywhere (other than in the jquery library itself). My external js file (containing code above) comes after jquery, like you say. – Mike Mike May 02 '12 at 13:30
  • If your other jQuery code works on the parent page, then there is only one response I have: "`I have no idea why it doesn't work. Sorry I couldn't help`" – Sthe May 02 '12 at 13:32