在iframe中使用iScroll

Question

All

I want to use iScroll in iframe.

This is my code

HTML

<form>
        <input type="text" class="frmUrlVal">
        <input type="submit" class="frmSubmit" value="Go">
      </form>
      <iframe src="http://www.css-tricks.com" width="360" height="500" id="dynFrame"></iframe>

JS

$(function()
{
  $('.frmSubmit').click(function(e)
  {
    $('#dynFrame').attr('src', $('.frmUrlVal').attr('value'));
    e.preventDefault();
  });
});

This is my jsfiddle link : http://jsfiddle.net/ajaypatel_aj/JtCJa/​ ​You can see here there is vertical scrollbar, i want to use iSroll instead of that regular scroller. I tried with applying the id but it not work for me.

Thanks In Advance !

Answer 1

我认为你最接近的选择是http://jsfiddle.net/JtCJa/9/它仍然需要调整，你不能点击链接，但它可以正常工作:)

Answer 2

You can't do this from parent frame. You must add iScroll's script directly to "http://www.css-tricks.com" page. If this site doesn't belong to you, you can't do this because executing JavaScript code on pages from different domain is forbidden for security reasons.

You can set very big height of frame, so scroll bar inside the frame will disappear, only the scroll bar of parent frame will remain. This scrollbar can be styled with JavaScript because it belongs to your domain. But I think scrolling page with mouse inside frame will not work (you can't receive mouse events from third-party frame). And page height becomes very big (you can't determine the height of frame contents).

Well, you can download entire page contents on server side and display its copy on your site. In this case JavaScript on this page will work and scrollbar can be styled. There are several scripts for doing this. Trey're called "web proxies". You can use one of them, for example, PHProxy . It's complicated to implement this functionality yourself because there are some techinal difficulties (downloading related files, redirecting ajax requests, saving cookies etc).

Answer 3

hey ajajy you have to add class also in your file

<iframe src="http://www.css-tricks.com" width="360" height="500" id="navbar" class="navbar_relative"></iframe>

and js funcation

function magentoScrollMimic(){
 j(document).scroll(function(e){
      if(j(window).scrollTop()>138)
        {
            j('#dynFrame').addClass('navbar_fixed');
            j('#dynFrame').removeClass('navbar_relative');

        }
        else
        {
            j('#dynFrame').removeClass('navbar_fixed');
            j('#dynFrame').addClass('navbar_relative');
        }
   }); 
}

samjyo

and use directly

<ul id="dynFrame" class="navbar_relative">

i used this and its working

j(document).ready(function(){
    magentoScrollMimic(); }