Solved

override iframe link class with class of my own

Posted on 2012-03-21
5
597 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

742 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