Solved

override iframe link class with class of my own

Posted on 2012-03-21
5
576 Views
Last Modified: 2012-04-21
I have to import a content from another website for booking purposes and there are links within the iframe content like the below that open a lightbox within the iframe

<a href="#" class="photos" rel=".photo_overlay[data-id=room_30372]">Photos</a>


<div class='photo_overlay overlay' data-id='room_30372'>
<div class='header'>
<h3>Driftwood Mantaray</h3>
<h4>2Bed (Sup)-2 nights min</h4>
</div>
<div class='hero'>
<span class='edge'></span>
<span class='container'><img alt="2Bed (Sup)-2 nights min" data-src="/attachments/photos/images/RoomType/30372/000/062/021/standard/IMG_9234.jpg?1306372065" src="/images/placeholder.png?1306203735" /></span>
</div>
<div class='thumbs'>
<img alt="2Bed (Sup)-2 nights min" data-src="/attachments/photos/images/RoomType/30372/000/062/021/thumb/IMG_9234.jpg?1306372065" src="/images/placeholder.png?1306203735" />
<img alt="2Bed (Sup)-2 nights min" data-src="/attachments/photos/images/RoomType/30372/000/062/022/thumb/IMG_9246.jpg?1306372073" src="/images/placeholder.png?1306203735" />
<img alt="2Bed (Sup)-2 nights min" data-src="/attachments/photos/images/RoomType/30372/000/062/023/thumb/IMG_9229.jpg?1306372086" src="/images/placeholder.png?1306203735" />
<img alt="2Bed (Sup)-2 nights min" data-src="/attachments/photos/images/RoomType/30372/000/062/024/thumb/IMG_9224.jpg?1306372100" src="/images/placeholder.png?1306203735" />
</div>
</div>

Open in new window


Is there anyway I can force these links to use my fancybox code in the main page and open a window over the whole page rather than just the iframe content? If so, how?

Thanks
0
Comment
Question by:swgdesign
  • 3
  • 2
5 Comments
 
LVL 7

Expert Comment

by:micropc1
ID: 37749710
In your A tag use target="_top" or target="_parent"

or target="_blank" for a new window.
0
 

Author Comment

by:swgdesign
ID: 37749763
I do not have control over the iframe content, hence why I want to know if there is some cool jquery that can search through the code in an iframe and rewrite /override the class/target for the lightbox so that when the link is clicked it loads in the parent page i.e. my page.
0
 
LVL 7

Expert Comment

by:micropc1
ID: 37749993
Ah..  I see. You could create your own method to do it. Something like...

var redirectLinks = function() {
   var myIframe = window.frames[0];
   var iFrameLinkArr = myIframe.contentWindow.document.getElementsByTagName('a');
   for (var i = 0; i < iFrameLinkArr.length; i++) {
      iFrameLinkArr[i].target = "_blank";
   }
}

Open in new window


i haven't tested this because I'm typing this on my iPhone, so there's probably a bug or two, but it should give you the general idea.
0
 

Accepted Solution

by:
swgdesign earned 0 total points
ID: 37827316
Unfortunately I still haven't found a solution for this and have stopped looking as it is too cumbersome to know every single class or ID of the iframe content.
0
 

Author Closing Comment

by:swgdesign
ID: 37875141
There si no easy solution for this and so I have ditched the project and accepted my own answer.
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question