Solved

override iframe link class with class of my own

Posted on 2012-03-21
5
582 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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

808 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