Basically we have this website which is a retailer of bigger brands.
They want to include the brand's own catalog which is on the brands website.
Problem is, the brand itself is selling their product on their website, too.
Is there way to actively hide the top parts (first 500px of height and last 300px of height) of the webpage inside the iframe?
I've tried many methods but they either failed or I got "unsafe" method errors such as this:
Unsafe JavaScript attempt to access frame with URL http://www.siteaddress.com/ from frame with URL http://www.othersiteaddress.com/. Domains, protocols and ports must match.
I don't want to change anything on their website, I just want to hide the top and bottom parts.
What makes this harder is that some pages inside the iframe will have different heights, so the only way is to ommit the first 500 px and the last 300px of height. But how, the last few hours didn't help me find it out.
Is this possible? Any help is appreciated.
No. There are fancy things you could try, but it would actually be easier to scrape and interact with the brand's website on the server side.
So No. Just No.
Short answer: no, you're most likely not going to be able to achieve what you are after.
Longer answer:
To run javascript on the page you are embedding it either needs to be from the same domain (as to not fall foul of browser cross-domain blocking of your javascript), or modified to include specific scripts to allow communication.
Even if you had access make changes to the website being included in the iframe, which it appears you do not, this would still cause many issues. As already indicated, pages would vary with content and structure, you would probably need to do something like hiding specific DOM elements such as a header/footer/container etc - which would then affect the layout, and so on.
There would be so many edge cases to account for, achieving the result you're aiming for is just not practical.
Related
Looking for a way (client-side or server-side) to detect the actual content part of a web page and remove its header, footer & navigation. Something similar to the way the Amazon's "Send to Kindle" add-on for Firefox works. The solution can be either client-side (JavaScript) or server-side.
I understand that it can't be a 100% reliable solution but I was wondering if there's a library/algorithm somebody already used for this type of problem.
Either check which <div> tag has the most content (really unreliable) or make a list of all class names/ ids that are used by major sites to mark their main content-markup and save them in a database. you should be able to do with a couple thousand rows and then parse the pages using DOM to check with class name is available.
This might not be the fastest solution, but you could speed it up, if you map certain sites, you know which class names they use.
EDIT:
You will still have to refine your algorithm. For example:
how do you handle multiple of those stored class names being present
what do you do, if none is present (show the whole page?, Show only the biggest div?
What I want:
I have a situation where I want to show affiliate ads on my website. These are basically javascripts, with content within them. As my site has a responsive design, I want to load different ads depending on the jQuery innerwidth property. So summed up: I want to load different javascripts depending on the innerwidth property.
What I have done:
I load two different javascripts in hiddenfields, and depending on the innerwidth, I show either one with the div.html() command. However, this gives the "potentially dangerous request.form" error when the user submits a post (ASP.NET defence of XSS), as the content loaded has dangerious characthers, which makes sense.
I could say "ValidateRequest=false" on all pages, but that's a horrible solution which would open a lot of security problems.
My thoughts...
The best way would be to load the ads from the server-side, but we don't know the browser width here. From what I've been able to read, it seems hard / impossible to get the innerwidth value at page_load.
But I would like to load my ads without making a potentially dangerious request.
Any ideas on how to solve this?
The solution I ended up with, was to set the HTML of to invisible divs, DivA and DivB, at Page_Load.
Then, in JavaScript, depending on the innerwidth property (and on the resize event), I could set the divs to visible/invisible.
Very simple solution, compared to what I was trying to do. Yes, it gives a little bit more rendered HTML, but at least it works and it's fast.
Just as the question states, I have an iframe that is on a cross domain parent. I need to trigger an event if that content is scrolled into view or already in view on page load. Normal checks for distance from top/side of page and viewport height/width don't seem to work as they measure the page within the iframe itself.
I cannot edit/add anything on the parent page to enable this functionality, everything must be within the iframe itself.
The reason behind this is to record whether content has ever had the chance to be viewed by the user or if it was loaded out of view and kept there.
There are companies who provide this service for advertising, but as far as finding out how it is actually done, well it seems to be one of the dark arts.
Any help would be greatly appreciated.
EDIT: Two examples of the companies I spoke of who offer this service.
View the first tick under (4)
http://www.doubleverify.com/what-is-verification/
First thing they state they can do on the right hand side http://adxpose.com/home.page
spider.io does this probably using browser timing attacks. there is a video on their page:
http://www.spider.io/viewability/
here is a nice report on how some browser timing attacks work: http://www.contextis.com/documents/2/Browser_Timing_Attacks.pdf
Simple answer is, you can't.
You have no way to access a cross-domain iframe (DOM or window object) with ECMAscript because of the Same Origin Policy.
Are you sure those examples are exclusively iframe based? Maybe they need to add some javascript to the parent Window.
If you really need this, and 100% accuracy is not needed, I would try some time based techniques on the assumption that most browser will optimize graphical work happening out of view.
Being realistic I don't think it would be possible to get good results with that techniques in a reasonable time or expecting a general robust cross-browser solution. It would be quite fun though.
doubleverify and adxpose use "offline" techniques to determine if the ad was visible or not, it doesn't happen on the page view. If they did it through Javascript, all you would have to do is look at one of their pixels to see how it works.
I was wondering if there are any methods to check if a website is successfully displayed or rendered on the a user's system.
The application of this is to to deliver a content if and only if it is a real user rather than a crawler/spider fetching the content.
so the check would be:
-check if the content is rendered/displayed,
-execute the next script
-otherwise
-do something else
any help is highly appreciated.
Cheers
Most crawlers simply do not execute any JavaScript, but you cannot really rely on that since it's easy to imagine a sophisticated company creating a search engine that actually does mimic a JS-enabled browser. Many crawlers have an easily identifiable user-agent string, but you cannot rely on that either.
You could do something, I suppose, like attempt to poll for the mouse x,y position a couple of times, looking for values other than 0,0, which is likely to indicate a person with an actual computer and pointing device is at the other end. That still may not get what you want for touch screen devices though. You might also consider waiting until you detect a scrolling event if your secondary scripts don't need to load right away.
I have a client who wants to do a website with specific height for the content part.
The Question:
Is there any way that when the text is long / reach the maximum height of the content part, then a new page is created for the next text.
Within my knowledge, somehow I know this can't be done.
Thanks for helping guys!
You will probably want to look into something like jQuery paging with tabs
http://code.google.com/p/jquery-ui-tabs-paging/
Unfortunately you would need to figure out the maximum number of characters you want to allow in the content pane and anything after that would need to be put into another tab. You can hide the tab and use just a link instead.
Without more knowledge on what you're development is, this is a difficult question to answer. Are you looking to create a different page entirely, or just different sections on a page?
The former can be done using server-side code (e.g. Rails), and dynamically serving out pages (e.g. Google results are split across many page).
The latter can be done with Javascript and/or CSS. A simple example is:
<div id="the_content" style="overflow:hidden;width:200px;height:100px">
Some really long text...
</div>
This would create a "scroll" bar and just not disrupt the flow of the page. In Javascript (e.g. JQuery), you'll be able to split the content into "tabs".
Does this help?
(Almost) everything is possible, but your intuitions are right in that this can't be done easily or in a way that makes any sense.
If I were in your position, I would go up to the client and present advantages and disadvantages to breaking it up. Advantages include the fact that you'd be able to avoid long pages and that with some solutions to this problem, the page will load faster. Disadvantages include the increased effort (i.e., billable hours) it would take to accomplish this, the lack of precedent for it resulting in users being confused, and losses to SEO (you're splitting keywords amongst n pages).
This way, you're not shooting down the client's idea, and in the likely case the client retreats from his position, he will go away thinking that he's just made a smart choice by himself and everyone goes away happy.
If you're intent on splitting it up into pages, you can do it on the backend by either literally structuring your content into pages or applying some rule (e.g., cut a page off at the first whole paragraph after 1000 characters) to paginate the results. On the frontend, you could use hashtags to allow Javascript to paginate the results. You could even write an extensible library that "paginates" any text node. In fact, I wouldn't be surprised if one didn't exist already.