?
Solved

override iframe link class with class of my own

Posted on 2012-03-21
5
Medium Priority
?
626 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone 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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Suggested Courses

839 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