Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
314 views
in Technique[技术] by (71.8m points)

javascript - 使IFrame动态调整大小(Make IFrames resizable dynamically)

I have the following HTML page in which I have three iframes.(我有以下HTML页面,其中有三个iframe。)

I would like to allow users to resize the height and width of the iframes manually using Javascript.(我想允许用户使用Javascript手动调整iframe的高度和宽度。) <body> <table> <tr> <td colspan="2" id = "freebase_td"> <iframe id = "freebase_frame" src="" width="100%" height="400px"></iframe> </td> </tr> <tr> <td align="left" id = "wiki_td"> <iframe id = "wiki_frame" src="" width="100%" height="400px"></iframe> </td> <td align="right" id = "imdb_td"> <iframe id = "imdb_frame" src="" width="100%" height="400px"></iframe> </td> </tr> </table> </body>   ask by Saurabh Saxena translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Your best bet really is to use a library to do this, such as jQueryUI Resizable -- there are a lot of inter-browser quirks with doing this right.(最好的选择实际上是使用一个库来做到这一点,例如jQueryUI Resizable-做到这一点有很多浏览器间的怪癖。)

Especially when you need to allow the user to specify an arbitrary size/resize, and a draggable resize handle is almost always the most intuitive way to allow users to resize an element.(尤其是当您需要允许用户指定任意大小/调整大小时,可拖动的调整大小手柄几乎总是允许用户调整元素大小的最直观的方法。) Setting the width/height of the iframe directly should be okay if you are just resizing the iframe, but that doesn't do anything to get the new width/height from the user in an intuitive way.(如果只是调整iframe的大小,则直接设置iframe的宽度/高度应该可以,但是这样做并不能以直观的方式从用户那里获得新的宽度/高度。) Also see Resizing iFrame with jQuery UI -- you need to wrap the iframe in a div, set the iframe to height=100% width=100%, and make the div resizable.(另请参阅使用jQuery UI调整iFrame大小 -您需要将iframe包裹在div中,将iframe设置为height = 100%width = 100%,并使div可调整大小。) Drag-to-resize will not work correctly if you make the bare iframe Draggable.(如果您将裸机iframe设置为可拖动,则拖动到调整大小将无法正常工作。) (This is an event bubbling limitation in some browsers, not a jQuery bug per se.)((这是某些浏览器中的事件冒泡限制,本身不是jQuery错误。))

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...