CODEWITHSUNDEEP
javascriptjqueryhtmliframe
user1592380
user1592380

Reputation: 36337

How to dynamically create iframe HTML using jquery

I am trying to develop a jquery script which will open an iframe containing the webpage when you hover over a table td . I'm basing this on How to show live preview in a small popup of linked page on mouse over on link? , and so on page load I want to turn all urls in the table into the format:

<a href="URL"></a><div class="box"><iframe src="URL" width = "500px" height = "500px"></iframe></div>

However I'm not sure how to build this html with jquery. Can someone help me?

Upvotes: 0

Views: 2949

Answers (2)

indubitablee
indubitablee

Reputation: 8216

something like this? http://jsfiddle.net/swm53ran/176/

<table>
    <tr>
        <td>This is a Td</td>
        <td>This is a Td</td>
        <td class="hover">Hover over this td</td>
        <td>This is a Td</td>
    </tr>
    <tr>
        <td class="hover">Hover over this td</td>
        <td>This is a Td</td>
        <td>This is a Td</td>        
        <td>This is a Td</td>
    </tr>
</table>
<div class="stuff">
</div>

$(document).ready(function() {
    $('.hover').on('mouseover', function() {
        var html = '<a href="URL"></a><div class="box"><iframe src="URL" width = "500px" height = "500px"></iframe></div>';
        $('.stuff').html(html);
    });
});

Upvotes: 1

Travis J
Travis J

Reputation: 82337

On dom ready, iterate each anchor in the table, and use insertAfter and a string for the html

$(function(){
 $("table a").each(function(){
  $('<div class="box"><iframe src="' + this.href + '" width = "500px" height = "500px"></iframe></div>').insertAfter(this);
 });
});

However, this may not be ideal and there is no real way to accomplish what you are looking for in certain scenarios. Many websites prevent cross domain requests like this, and for those sites the iframe preview will not work (Stack Overflow for example). There is no workaround for that scenario.

Upvotes: 1

Related Questions