/    Sign up×
Community /Pin to ProfileBookmark

trying to eliminate iframe, but still search 2nd html file

I’ve painted myself into a corner, and I can’t use any server-side solutions.

With some help, I’ve been working on a script on x.html that searches for a specific “image Y” within “Y.html” (inside an iframe). Then the script replaces the “Image x” url to the url of “image Y”.

It drills through a specific div, to a specific span, to find this image Y. I have it this way, because it’s a pre-built content management system that hasn’t given me the ability to show the image on another page. I need to do this several times on one html file, so I’m running into huge load times, and there seem to be numerous clashes with servers and locking up. So I’m hoping there’s a way to just avoid iframes and achieve the same result.

Here’s the script that I’ve got, to help understand what I’ve done. Any suggestions on how to access the info on a different html – without iframes.

[CODE]

<iframe id=IFrame1 width=’5′ height=’5′ frameheight=’5′ framewidth=’5′ frameborder=’5′ src=”http://frontdoorsnews.com/cover_stories/?page=complete” ></iframe>

<script type=”text/javascript” language=”JavaScript”>
function find_div_class() {
var iframe = document.getElementById(‘IFrame1’);
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var info = innerDoc.getElementsByClassName(“list-journal-entry-wrapper”)[0];

var theURL = null; // assume not found

var spans = info.getElementsByTagName(“span”);
for ( var s = 0; s < spans.length; ++s )
{
// have to search through spans for the class name:
var span = spans[s];
if ( span.className.indexOf(“full-image-float-left”) >= 0
&& span.className.indexOf(“ssNonEditable”) >= 0 )
{
// we found the right one
// get FIRST image inside that span:
var image = span.getElementsByTagName(“img”)[0];
// and then the image link:
theURL = image.src;
break; // quit when we find first one
}
}
if ( theURL == null )
{
alert(“I can’t find the darned thing!”);
} else {

var img = document.getElementById(‘lead1’);
img.src = (theURL);
return false;
}

}
</script>

<img src=”/storage/images/placeholder_mug.gif?__SQUARESPACE_CACHEVERSION=1314645589635″ id=”lead1″ alt=”” onload=”find_div_class()”/>

[/CODE]

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@DorkyAug 30.2011 — actually serverside, you could do this with half or less than the code you have now.

it sounds to me like you are pulling cross-domain data, no cms keeps you from the images(that i have ever seen), but as i said, php has cross domain file functions and once the file(page) is read into a string you can use

the following. if you are doing it with multiple images, just stick it in a while(loop)

[CODE]
if(strpos(strtolower($var),"image spec",0) !==false)
{
$init =strpos(strtolower($var),"src=",0)+5;
$len =strpos(strtolower($var),".",starting pointer)+3;
substr_replace("$var,"new data",$init,$len); }
[/CODE]
Copy linkTweet thisAlerts:
@turpentyneauthorAug 30.2011 — nope. Unfortunately, I really can't use server side coding.

I should clarify that it's not a traditional cms system like we're used to. It's Squarespace - a blogging site that my client used to make a magazine. It's not a decision I would've made, but it's what I've got to work with. For their own internal security, Squarespace doesn't allow anyone to put server-side code on the site. If I uploaded some, it still wouldn't work. The pages I'm pulling are not cross-domain, though. They're just on different pages, generated within the Squarespace system.

On top of that there's limits to how we can display the information. What I'm wanting, only works with RSS feeds that don't show images. If there's a javascript solution, that's what I need. I can see the source code and the div and span I need to find the file path within. Unfortunately, another limitation is that I have to pull different feeds on different pages for each category. I can't pull it from one feed because of how their feed pulls without separating out categories when displaying.

Any suggestions? I was told by their support staff that they've seen one or two people code a way to do what I'm trying to do.

Thanks!
Copy linkTweet thisAlerts:
@DorkyAug 30.2011 — i don't know enough javascript but since you mentioned feeds, i have to imagine this would be less tasking for the browser.
Copy linkTweet thisAlerts:
@p_phreshAug 30.2011 — If you have the ability to add new javascript classes you may want to look at using jquery to load the html data as a text object.

[CODE]
$.get(srcLink, function(data) {
// read the html as text data, and grab what you need.
});
[/CODE]


i use this method to quickly grab information from other pages (in my case tables containing data mixed with other elements) without loading the page in an iframe. I use a regular expression to get information.

If you really wanted to you could append or load the string as innerHTML in the parent element where your image resides, to swap it out.

[CODE]
$.get(srcLink, function(data) {
if (/<table/ig.test(data)){
data = escape(data);
data = data.replace(/&#37;0A/ig, "");
data = unescape(data);
var tables = data.match(/<table.*?</table>/ig);
...
}
});
[/CODE]


You have to take all the line breaks out of the string before you can grab the whole element.

Keep in mind, this method may not work to grab elements that have the same element nested within. But it could if you found the right pattern to match.
×

Success!

Help @turpentyne spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...