ฉันกำลังทำงานกับแอปพลิเคชันที่คล้ายกับ iGoogle เนื้อหาจากแอปพลิเคชันอื่น (ในโดเมนอื่น) จะแสดงขึ้นโดยใช้ iframes
ฉันจะปรับขนาด iframe ให้พอดีกับความสูงของเนื้อหา iframes ได้อย่างไร
ฉันพยายามถอดรหัส javascript ที่ Google ใช้ แต่มันทำให้งงงวยและการค้นหาเว็บยังไม่เป็นผลดี
อัปเดต:โปรดทราบว่าเนื้อหาถูกโหลดจากโดเมนอื่นดังนั้นจึงมีการนำนโยบายต้นกำเนิดเดียวกันมาใช้
คำตอบ:
เรามีปัญหาประเภทนี้ แต่กลับเล็กน้อยกับสถานการณ์ของคุณ - เรากำลังให้เนื้อหา iframed ไปยังเว็บไซต์ในโดเมนอื่น ๆ ดังนั้นนโยบายแหล่งกำเนิดเดียวกันก็เป็นปัญหาเช่นกัน หลังจากใช้เวลาหลายชั่วโมงกับการสืบค้นด้วย google ในที่สุดเราก็พบวิธีแก้ปัญหาที่ใช้การได้ (บ้าง .. ) ซึ่งคุณสามารถปรับให้เข้ากับความต้องการของคุณได้
มีวิธีเกี่ยวกับนโยบายต้นทางเดียวกัน แต่ต้องมีการเปลี่ยนแปลงทั้งเนื้อหา iframed และหน้าเฟรมดังนั้นหากคุณไม่มีความสามารถในการร้องขอการเปลี่ยนแปลงทั้งสองด้านวิธีนี้จะไม่เป็นประโยชน์กับคุณมากนัก ฉันกลัว.
มีการเล่นโวหารเบราว์เซอร์ที่ช่วยให้เราสามารถกำหนดนโยบายต้นกำเนิดเดียวกันได้ - จาวาสคริปต์สามารถสื่อสารกับหน้าเว็บในโดเมนของตัวเองหรือกับหน้าเว็บที่มี iframed แต่ไม่เคยมีหน้าเว็บที่มีกรอบเช่นถ้าคุณมี:
www.foo.com/home.html, which iframes
|-> www.bar.net/framed.html, which iframes
|-> www.foo.com/helper.html
จากนั้นhome.htmlสามารถสื่อสารกับframed.html(iframed) และhelper.html(โดเมนเดียวกัน)
Communication options for each page:
+-------------------------+-----------+-------------+-------------+
| | home.html | framed.html | helper.html |
+-------------------------+-----------+-------------+-------------+
| www.foo.com/home.html | N/A | YES | YES |
| www.bar.net/framed.html | NO | N/A | YES |
| www.foo.com/helper.html | YES | YES | N/A |
+-------------------------+-----------+-------------+-------------+
framed.htmlสามารถส่งข้อความไปยังhelper.html(iframed) แต่ไม่ home.html (เด็กไม่สามารถสื่อสารข้ามโดเมนกับผู้ปกครอง)
ที่สำคัญนี่คือการที่helper.htmlสามารถรับข้อความจากframed.htmlและยังสามารถสื่อสารhome.htmlกับ
ดังนั้นโดยทั่วไปเมื่อframed.htmlโหลดมันจะทำงานออกความสูงของตัวเองบอกhelper.htmlซึ่งส่งข้อความไปยังhome.htmlซึ่งสามารถปรับขนาด iframe ที่framed.htmlอยู่
วิธีที่ง่ายที่สุดที่เราพบว่าผ่านข้อความจากframed.htmlถึงhelper.htmlคือผ่านอาร์กิวเมนต์ URL ในการทำเช่นนี้framed.htmlมี iframe พร้อมsrc=''ระบุ เมื่อonloadไฟไหม้มันจะประเมินความสูงของตัวเองและตั้งค่า src ของ iframe ณ จุดนี้เป็นhelper.html?height=N
มีคำอธิบายที่นี่เกี่ยวกับวิธีจัดการ Facebook ซึ่งอาจจะชัดเจนกว่าของฉันเล็กน้อยด้านบน!
ในwww.foo.com/home.htmlรหัสจาวาสคริปต์ต่อไปนี้เป็นสิ่งจำเป็น (ซึ่งสามารถโหลดได้จากไฟล์. js บนโดเมนใด ๆ โดยบังเอิญ .. ):
<script>
// Resize iframe to full height
function resizeIframe(height)
{
// "+60" is a general rule of thumb to allow for differences in
// IE & and FF height reporting, can be adjusted as required..
document.getElementById('frame_name_here').height = parseInt(height)+60;
}
</script>
<iframe id='frame_name_here' src='http://www.bar.net/framed.html'></iframe>
ในwww.bar.net/framed.html:
<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>
<script type="text/javascript">
function iframeResizePipe()
{
// What's the page height?
var height = document.body.scrollHeight;
// Going to 'pipe' the data to the parent through the helpframe..
var pipe = document.getElementById('helpframe');
// Cachebuster a precaution here to stop browser caching interfering
pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();
}
</script>
เนื้อหาของwww.foo.com/helper.html:
<html>
<!--
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content
-->
<body onload="parentIframeResize()">
<script>
// Tell the parent iframe what height the iframe needs to be
function parentIframeResize()
{
var height = getParam('height');
// This works as our parent's parent is on our domain..
parent.parent.resizeIframe(height);
}
// Helper function, parse param from request string
function getParam( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
</script>
</body>
</html>
parentIframeResize()ฉันใช้ JQuery เพื่อตรวจจับทั้งการโหลดหน้าและเหตุการณ์การปรับขนาดใด ๆ : $(document).ready(iframeResizePipe); $(window).resize(iframeResizePipe);สิ่งนี้ทำให้ฉันสามารถตั้งค่า iframe width="100%"และหากความกว้างของหน้าต่างเปลี่ยนเป็นการตัดข้อความหรือบางอย่าง เฟรมภายในจะรับรู้ว่าจำเป็นต้องปรับขนาด
หากคุณไม่จำเป็นต้องจัดการกับเนื้อหา iframe จากโดเมนอื่นลองใช้รหัสนี้มันจะแก้ปัญหาได้อย่างสมบูรณ์และเป็นเรื่องง่าย:
<script language="JavaScript">
<!--
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>
<iframe src="usagelogs/default.aspx" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>
document.getElementById(id)คุณมีและทำให้รหัสง่ายขึ้น
https://developer.mozilla.org/en/DOM/window.postMessage
window.postMessage ()
window.postMessage เป็นวิธีการเปิดใช้งานการสื่อสารข้ามแหล่งที่มาอย่างปลอดภัย โดยปกติแล้วสคริปต์ในหน้าต่าง ๆ จะได้รับอนุญาตให้เข้าถึงซึ่งกันและกันหากหน้าเว็บที่ดำเนินการนั้นอยู่ในตำแหน่งที่มีโปรโตคอลเดียวกัน (โดยปกติคือทั้ง http), หมายเลขพอร์ต (80 เป็นค่าเริ่มต้นสำหรับ http) และโฮสต์ (modulo) document.domain ถูกตั้งค่าโดยทั้งสองหน้าเป็นค่าเดียวกัน) window.postMessage จัดเตรียมกลไกควบคุมเพื่อหลีกเลี่ยงข้อ จำกัด นี้ในวิธีที่ปลอดภัยเมื่อใช้อย่างถูกต้อง
สรุป
window.postMessage เมื่อถูกเรียกจะทำให้ MessageEvent ถูกส่งไปที่หน้าต่างเป้าหมายเมื่อสคริปต์ที่รอดำเนินการใด ๆ ที่ต้องถูกดำเนินการให้เสร็จสิ้น (เช่นตัวจัดการเหตุการณ์ที่เหลืออยู่หากเรียกตัวจัดการเหตุการณ์ window.postMessage จากตัวจัดการเหตุการณ์ ) MessageEvent มีข้อความชนิดคุณสมบัติข้อมูลซึ่งถูกตั้งค่าเป็นค่าสตริงของอาร์กิวเมนต์แรกที่มีให้กับ window.postMessage คุณสมบัติต้นกำเนิดที่สอดคล้องกับที่มาของเอกสารหลักในหน้าต่างเรียก window.postMessage ที่หน้าต่างเวลา postMessage ถูกเรียกใช้และคุณสมบัติแหล่งข้อมูลซึ่งเป็นหน้าต่างที่เรียกว่า window.postMessage (คุณสมบัติมาตรฐานอื่นของเหตุการณ์จะแสดงด้วยค่าที่คาดหวัง)
iFrame-Resizerห้องสมุดใช้ postMessage เพื่อให้ iFrame ขนาดให้เนื้อหาของมันพร้อมกับMutationObserverในการตรวจสอบการเปลี่ยนแปลงเนื้อหาและไม่ขึ้นอยู่กับ jQuery
https://github.com/davidjbradshaw/iframe-resizer
jQuery: ความดีในการเขียนสคริปต์ข้ามโดเมน
http://benalman.com/projects/jquery-postmessage-plugin/
มีตัวอย่างของการปรับขนาดหน้าต่าง iframe ...
http://benalman.com/code/projects/jquery-postmessage/examples/iframe/
บทความนี้แสดงวิธีการลบการพึ่งพา jQuery ... Plus มีข้อมูลที่เป็นประโยชน์มากมายและลิงก์ไปยังโซลูชันอื่น ๆ
http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/
ตัวอย่าง Barebones ...
http://onlineaspect.com/uploads/postmessage/parent.html
HTML 5 ร่างการทำงานบน window.postMessage
http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages
John Resig เกี่ยวกับการส่งข้อความข้ามหน้าต่าง
วิธีที่ง่ายที่สุดในการใช้ jQuery:
$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
$(this).css("height", $(this).contents().height() + "px");
});
วิธีแก้ปัญหาเกี่ยวกับhttp://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html ใช้งานได้ดี (ใช้ jQuery):
<script type=”text/javascript”>
$(document).ready(function() {
var theFrame = $(”#iFrameToAdjust”, parent.document.body);
theFrame.height($(document.body).height() + 30);
});
</script>ฉันไม่ทราบว่าคุณต้องเพิ่ม 30 ความยาว ... 1 ใช้งานได้สำหรับฉัน
FYI : หากคุณมีแอตทริบิวต์ "ความสูง" ใน iFrame ของคุณแล้วสิ่งนี้จะเพิ่ม style = "height: xxx" นี่อาจไม่ใช่สิ่งที่คุณต้องการ
อาจจะสายไปสักหน่อยเนื่องจากคำตอบอื่น ๆ ทั้งหมดมีอายุมากกว่า :-) แต่ ... นี่คือคำตอบของฉัน ทดสอบใน FF จริง, Chrome และ Safari 5.0
CSS:
iframe {border:0; overflow:hidden;}javascript:
$(document).ready(function(){
$("iframe").load( function () {
var c = (this.contentWindow || this.contentDocument);
if (c.document) d = c.document;
var ih = $(d).outerHeight();
var iw = $(d).outerWidth();
$(this).css({
height: ih,
width: iw
});
});
});หวังว่านี่จะช่วยใครก็ได้
ในที่สุดผมก็พบว่ามีการแก้ปัญหาอื่น ๆ สำหรับการส่งข้อมูลไปยังเว็บไซต์ของผู้ปกครองจาก iframe window.postMessage(message, targetOrigin);ใช้ ที่นี่ฉันอธิบายว่าฉันทำ
ไซต์ A = http://foo.com ไซต์ B = http://bar.com
SiteB กำลังโหลดภายในเว็บไซต์ siteA
เว็บไซต์ SiteB มีบรรทัดนี้
window.parent.postMessage("Hello From IFrame", "*"); หรือ
window.parent.postMessage("Hello From IFrame", "http://foo.com");จากนั้นไซต์ A มีรหัสต่อไปนี้
// Here "addEventListener" is for standards-compliant web browsers and "attachEvent" is for IE Browsers.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child IFrame window
eventer(messageEvent, function (e) {
alert(e.data);
// Do whatever you want to do with the data got from IFrame in Parent form.
}, false); หากคุณต้องการเพิ่มการเชื่อมต่อความปลอดภัยคุณสามารถใช้สิ่งนี้หากมีเงื่อนไข eventer(messageEvent, function (e) {})
if (e.origin == 'http://iframe.example.com') {
alert(e.data);
// Do whatever you want to do with the data got from IFrame in Parent form.
}สำหรับ IE
ภายใน IFrame:
window.parent.postMessage('{"key":"value"}','*');ภายนอก:
eventer(messageEvent, function (e) {
var data = jQuery.parseJSON(e.data);
doSomething(data.key);
}, false);นี่คือวิธีแก้ปัญหาอย่างง่ายโดยใช้สไตล์ชีทที่สร้างขึ้นแบบไดนามิกที่เสิร์ฟโดยเซิร์ฟเวอร์เดียวกันกับเนื้อหา iframe สไตล์ชีตนั้นค่อนข้าง "รู้" สิ่งที่อยู่ใน iframe และรู้ขนาดที่ใช้ในการจัดรูปแบบ iframe สิ่งนี้ได้รับข้อ จำกัด นโยบายกำเนิดเดียวกัน
http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/
ดังนั้นรหัส iframe ที่ให้มาจะมีสไตล์ชีทประกอบเช่น ...
<link href="http://your.site/path/to/css?contents_id=1234&dom_id=iframe_widget" rel="stylesheet" type="text/css" />
<iframe id="iframe_widget" src="http://your.site/path/to/content?content_id=1234" frameborder="0" width="100%" scrolling="no"></iframe>
สิ่งนี้ต้องการตรรกะด้านเซิร์ฟเวอร์ที่สามารถคำนวณขนาดของเนื้อหาที่แสดงผลของ iframe
คำตอบนี้ใช้ได้กับเว็บไซต์ที่ใช้ Bootstrap เท่านั้น คุณสมบัติการฝังแบบตอบสนองของ Bootstrap ทำงานได้ มันขึ้นอยู่กับความกว้าง (ไม่สูง) ของเนื้อหา
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>jsfiddle: http://jsfiddle.net/00qggsjj/2/
ฉันกำลังใช้โซลูชันเฟรมในเฟรมของ ConroyP เพื่อแทนที่โซลูชันตามการตั้งค่า document.domain แต่พบว่าค่อนข้างยากที่จะกำหนดความสูงของเนื้อหา iframe อย่างถูกต้องในเบราว์เซอร์ที่แตกต่างกัน (ทดสอบด้วย FF11, Ch17 และ IE9 ในขณะนี้ )
ConroyP ใช้:
var height = document.body.scrollHeight;แต่วิธีนี้ใช้ได้กับการโหลดหน้าเริ่มต้นเท่านั้น iframe ของฉันมีเนื้อหาแบบไดนามิกและฉันจำเป็นต้องปรับขนาด iframe ในบางเหตุการณ์
สิ่งที่ฉันทำคือการใช้คุณสมบัติ JS ที่แตกต่างกันสำหรับเบราว์เซอร์ที่แตกต่างกัน
function getDim () {
var body = document.body,
html = document.documentElement;
var bc = body.clientHeight;
var bo = body.offsetHeight;
var bs = body.scrollHeight;
var hc = html.clientHeight;
var ho = html.offsetHeight;
var hs = html.scrollHeight;
var h = Math.max(bc, bo, bs, hc, hs, ho);
var bd = getBrowserData();
// Select height property to use depending on browser
if (bd.isGecko) {
// FF 11
h = hc;
} else if (bd.isChrome) {
// CH 17
h = hc;
} else if (bd.isIE) {
// IE 9
h = bs;
}
return h;
}getBrowserData () เป็นฟังก์ชั่นตรวจจับเบราว์เซอร์ "เป็นแรงบันดาลใจ" โดย Ext Core ของhttp://docs.sencha.com/core/source/Ext.html#method-Ext-applyของ Ext Core
มันใช้งานได้ดีสำหรับ FF และ IE แต่ก็มีปัญหากับ Chrome หนึ่งในปัญหาเรื่องเวลาดูเหมือนว่า Chrome ใช้เวลาสักครู่ในการตั้งค่า / ตรวจสอบความสูงของ iframe และ Chrome จะไม่ส่งคืนความสูงของเนื้อหาใน iframe อย่างถูกต้องหาก iframe สูงกว่าเนื้อหา สิ่งนี้จะไม่ทำงานกับเนื้อหาแบบไดนามิกเมื่อความสูงลดลง
เพื่อแก้ปัญหานี้ฉันมักจะตั้งค่า iframe เป็นความสูงต่ำก่อนที่จะตรวจสอบความสูงของเนื้อหาและจากนั้นตั้งค่าความสูงของ iframe ให้เป็นค่าที่ถูกต้อง
function resize () {
// Reset the iframes height to a low value.
// Otherwise Chrome won't detect the content height of the iframe.
setIframeHeight(150);
// Delay getting the dimensions because Chrome needs
// a few moments to get the correct height.
setTimeout("getDimAndResize()", 100);
}รหัสไม่ได้รับการปรับให้เหมาะสมมาจากการทดสอบ devel ของฉัน :)
หวังว่าบางคนพบว่ามีประโยชน์นี้!
<html>
<head>
<script>
function frameSize(id){
var frameHeight;
document.getElementById(id).height=0 + "px";
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
}
document.getElementById(id).height= (frameHeight) + "px";
}
</script>
</head>
<body>
<iframe id="frame" src="startframe.html" frameborder="0" marginheight="0" hspace=20 width="100%"
onload="javascript:frameSize('frame');">
<p>This will work, but you need to host it on an http server, you can do it locally. </p>
</body>
</html>แกดเจ็ต iGoogle ต้องปรับใช้อย่างแข็งขันดังนั้นการเดาของฉันจึงอยู่ในรูปแบบข้ามโดเมนคุณไม่สามารถทำได้โดยไม่ต้องมีเนื้อหาระยะไกลเข้าร่วมในทางใดทางหนึ่ง หากเนื้อหาของคุณสามารถส่งข้อความที่มีขนาดใหม่ไปยังหน้าคอนเทนเนอร์โดยใช้เทคนิคการสื่อสารข้ามโดเมนทั่วไปส่วนที่เหลือนั้นเป็นเรื่องง่าย
เมื่อคุณต้องการย่อเว็บเพจให้พอดีกับขนาด iframe:
นี่คือตัวอย่าง:
<div id="wrap">
<IFRAME ID="frame" name="Main" src ="http://www.google.com" />
</div><style type="text/css">
#wrap { width: 130px; height: 130px; padding: 0; overflow: hidden; }
#frame { width: 900px; height: 600px; border: 1px solid black; }
#frame { zoom:0.15; -moz-transform:scale(0.15);-moz-transform-origin: 0 0; }
</style>นี่คือวิธีการ jQuery ที่เพิ่มข้อมูลใน json ผ่านทางแอตทริบิวต์ src ของ iframe นี่คือการสาธิตการปรับขนาดและเลื่อนหน้าต่างนี้ .. URL ที่ส่งผลกับรูปลักษณ์ JSON เช่นนี้ ... http://fiddle.jshell.net/zippyskippy/RJN3G/show/#{docHeight:5124,windowHeight:1019,scrollHeight: 571} #
นี่คือซอรหัสที่มาhttp://jsfiddle.net/zippyskippy/RJN3G/
function updateLocation(){
var loc = window.location.href;
window.location.href = loc.replace(/#{.*}#/,"")
+ "#{docHeight:"+$(document).height()
+ ",windowHeight:"+$(window).height()
+ ",scrollHeight:"+$(window).scrollTop()
+"}#";
};
//setInterval(updateLocation,500);
$(window).resize(updateLocation);
$(window).scroll(updateLocation); var iframes = document.getElementsByTagName("iframe");
for(var i = 0, len = iframes.length; i<len; i++){
window.frames[i].onload = function(_i){
return function(){
iframes[_i].style.height = window.frames[_i].document.body.scrollHeight + "px";
}
}(i);
}ทำงานกับ jquery on load (cross browser):
<iframe src="your_url" marginwidth="0" marginheight="0" scrolling="No" frameborder="0" hspace="0" vspace="0" id="containiframe" onload="loaderIframe();" height="100%" width="100%"></iframe>
function loaderIframe(){
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
} ในการปรับขนาดหน้าตอบสนอง:
$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
}
});ใช้ jQuery:
parent.html
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
iframe {
width: 100%;
border: 1px solid black;
}
</style>
<script>
function foo(w, h) {
$("iframe").css({width: w, height: h});
return true; // for debug purposes
}
</script>
<iframe src="child.html"></iframe>
</body>child.html
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
var w = $("#container").css("width");
var h = $("#container").css("height");
var req = parent.foo(w, h);
console.log(req); // for debug purposes
});
</script>
<style>
body, html {
margin: 0;
}
#container {
width: 500px;
height: 500px;
background-color: red;
}
</style>
<div id="container"></div>
</body>นี่เป็นเรื่องยุ่งยากเล็กน้อยตามที่คุณต้องรู้เมื่อหน้าโหลด iframe ซึ่งมีความแตกต่างเมื่อคุณไม่สามารถควบคุมเนื้อหาได้ มีความเป็นไปได้ที่จะเพิ่มตัวจัดการ onload ลงใน iframe แต่ฉันเคยลองสิ่งนี้ในอดีตและมันมีพฤติกรรมที่แตกต่างกันอย่างมากในเบราว์เซอร์ (ไม่เดาว่าใครน่ารำคาญที่สุด ... ) คุณอาจจะต้องเพิ่มฟังก์ชั่นในหน้า iframe ที่ดำเนินการปรับขนาดและฉีดสคริปต์ลงในเนื้อหาที่รับฟังการโหลดเหตุการณ์หรือปรับขนาดเหตุการณ์ซึ่งจะเรียกฟังก์ชั่นก่อนหน้านี้ ฉันคิดว่าจะเพิ่มฟังก์ชั่นในหน้าเว็บเพราะคุณต้องการให้แน่ใจว่ามันปลอดภัย แต่ฉันไม่รู้ว่ามันจะง่ายแค่ไหน
บางสิ่งในสายของฉันเชื่อว่าควรจะทำงาน
parent.document.getElementById(iFrameID).style.height=framedPage.scrollHeight;โหลดสิ่งนี้พร้อมกับเนื้อหาของคุณบนเนื้อหา iframe
ฉันมีวิธีแก้ปัญหาที่ง่ายและต้องการให้คุณกำหนดความกว้างและความสูงในลิงค์โปรดลอง (ใช้ได้กับเบราว์เซอร์ส่วนใหญ่):
<a href='#' onClick=" document.getElementById('myform').src='t2.htm';document.getElementById('myform').width='500px'; document.getElementById('myform').height='400px'; return false">500x400</a>