onClick inside an in div loaded page

Question

I load a page inside a div. This div supposed to trigger a function on a mouse click. I would like that this onClick event also works when you click on the loaded page.

If you load a page inside the div, the functions of the loaded page only works for that page. How can I make it happen that also the onClick function get triggered for the loaded page?

This is a simple example of the code:

function load() {
  var url_view = '<object type="text/html" data="http://www.example.com/"></object>';
  document.getElementById("image").innerHTML=url_view;
}
window.onload = load;
  function showbox() {
    alert("test");
  }

<div id ="frame"  onclick="showbox()">
  <div id="image">
  </div>
  <div class="infotext">
    <span>here comes some text.</span>
  </div>
</div>

To be clear
What I want to achieve is that when you load the page, you'll load data from example.com in a div with the id "image". This event happens with the function 'load()', on window.load.

When that is ready, I would like that you trigger the 'showbox()' function on a mouseclick when you click inside the div with the id "image" (the div where example.com is loaded into).

@UdhayTitus with `body onload` you load the external page into the div on the page load, but it doesn't make that the onclick function gets triggered when you click inside the div with the loaded page — Antonio, Aug 01 '19 at 11:54
@UdhayTitus What I want to achieve is to trigger the onclick function as well when you click on the loaded content. This doesn't work right now. If you click on the div where the "http://www.example.com/" data is loaded into, the function doesn't get triggered — Antonio, Aug 01 '19 at 12:07
If you just want to use the content in the loaded `#image` for viewing purposes only, you can add the following to your css: `object { pointer-events: none; }` — Starfish, Aug 01 '19 at 12:09
@Patrick2607 I would like to still have the possibility to scroll — Antonio, Aug 01 '19 at 12:14
Can't you add your different page into HTML instead of calling it from JavaScript? — TheUnKnown, Aug 01 '19 at 14:42
@TheUnKnown you mean copy/paste the HTML code of the page between the div with the id "image"? — Antonio, Aug 02 '19 at 08:26
Have you tried the event delegation approach. jQuery can provide it easily like `jQuery(document).on('click','#frame',function(e){ showbox()})` the ID `#frame` should be unique. — techie_28, Aug 02 '19 at 08:34
@techie_28 can you give an example how to implement this? I'm trying it, but I cannot get it working. — Antonio, Aug 02 '19 at 09:06
Place this `jQuery(function(){jQuery(document).on('click','#iframe',function(e){showbox()})});` after the `showbox` function definition. Press F12(for developer tools of browser) & click on the image or wherever you need & see if `console` shows anything? — techie_28, Aug 02 '19 at 09:18
@techie_28 when I implement it, it does work on the data within the div with id "frame", but not the part where the webpage is loaded (the div with id "image") — Antonio, Aug 02 '19 at 09:30
Do you mean it should also work if div with id 'image' is clicked? does it work when `infotext` div is clicked? — techie_28, Aug 02 '19 at 09:35
@techie_28 exactly! Yes, it does work when the `infotext` div is clicked. — Antonio, Aug 02 '19 at 09:38
That is perhaps due to your usage of `object` tag could you instead use any other relevant HTML element like `img` or just insert all the contents into `image` div itself? — techie_28, Aug 02 '19 at 09:41
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/197379/discussion-between-koen-de-haan-and-techie-28). — Antonio, Aug 02 '19 at 09:46
@KoendeHaan No, I meant the link that you're passing in the ` — TheUnKnown, Aug 02 '19 at 12:37

Renan Araújo · Answer 1 · 2019-08-02T13:19:36.687

0

You can try something like this:

<div id ="frame">
  <div id="image">
  </div>
  <div class="infotext">
    <span>here comes some text.</span>
  </div>
</div>

JS:

function showbox() {
  alert("show box");
}

$(document).ready(function() {

  $.get('https://jsfiddle.net/about', function(data) {
    $('#image').html(data);
    showbox();
  });

  $('#image').click(function() {
    showbox();
  });
});

Run it on jsfiddle due to CORS: https://jsfiddle.net/usn9qam7/1/

edited Aug 02 '19 at 13:19

answered Aug 01 '19 at 12:55

Renan Araújo

3,533
11
39
49

With this you trigger the function one time, after the external page is loaded into the div. Unfortunately it doesn't make that the onclick function works when you click inside the div with the loaded page, and that is what I would like to achieve. – Antonio Aug 01 '19 at 13:00
@KoendeHaan I have updated my answer, could you check please? – Renan Araújo Aug 01 '19 at 13:50
1

I'm always against implicitly doing `$el.click()` because such can cause many weird behaviors when an application grows in complexity. Sometimes you don't need to execute every single possible bound Event-name on an element, rather just call `showbox()` function. And `showbox()` speaks more than a `$el.click()`. – Roko C. Buljan Aug 01 '19 at 13:53
1

@RokoC.Buljan you are right! I have updated my answer. – Renan Araújo Aug 01 '19 at 13:57
@RenanAraújo what I mean is that when you load the page, you'll load data from example.com in a div with the id "image". This event happens with the function 'load()', on window.load. When that is ready, I would like that you trigger the 'showbox()' function on a mouseclick when you click **inside** the div with the id "image" (the div where example.com is loaded into). – Antonio Aug 02 '19 at 08:21
1

@KoendeHaan I'm not seeing any problem related to js events. Check this fiddle https://jsfiddle.net/usn9qam7/ Probably you are having problem with CORS, but this is not related to js events. Check you browser errors to verify that. – Renan Araújo Aug 02 '19 at 13:05
@RenanAraújo I indeed had problems with CORS, excuse me. Anyway, if I do it like that, I loose the working of the javascript on the other page, so I would like to use the `object` tag. – Antonio Aug 02 '19 at 13:26
1

@KoendeHaan Using object tag you will need to handle with X-Frame-Options. I wasn't able to create a fiddle with that. To know more about it, you can check this question https://stackoverflow.com/q/27358966/5071902 – Renan Araújo Aug 02 '19 at 13:44

onClick inside an in div loaded page

1 Answers1