IEの拡大・縮小機能をWebページ側から操作したい


IE7から追加されたページの拡大・縮小機能ですが
これをWebページ側から操作することは可能でしょうか?

特定のページにアクセスした場合に
必ず100%の拡大率で表示させたいのです。

CSSでhtmlやbody要素にzoom:100%を指定しても
ブラウザ側で設定された拡大率を基本としてしまうのでダメでした。
(つまりそのままの大きさで表示されます)

JavaScript、ActiveX等、技術はなんでもいいので
実現可能な方法があればご教授お願いいたします。


補足
・対象はIE8のみです
・社内ツールなのでアクセシビリティは考慮しなくて構いません
・必要なものがあればクライアントマシンにインストール可能です

このQ&Aに関連する最新のQ&A

A 回答 (2件)

<html>


<head>
<title>Zoom Check!</title>
</head>
<body onload="document.body.style.zoom = screen.logicalXDPI/screen.deviceXDPI;">
<p>test</p>
</body>
</html>

とか?
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
こちらのコードで期待する動作が得られました。

ただposition:absoluteになっている要素に対しては親要素の
zoomプロパティは無視されるようでした。

これに関してはabsoluteになっている要素そのものにも
同式より得られる数値を代入することで解決しました。
absoluteになっている要素が多いのでちょっと大変そうですが
なんとかなりそうです。

お礼日時:2010/08/23 23:56

IE限定ということでVBScriptを使ってみてはいかがでしょうか。



<html>
<head>
<title>テスト</title>
</head>
<body onload="zoomStyle()">

<h1>テスト</h1>
<p>ああああああああああああああああ</p>

<script language="VBScript">
<!--
Sub zoomStyle
Document.Body.runtimeStyle.Zoom = "100%"
End Sub
-->
</script>
</body>
</html>

参考URL
http://okwave.jp/qa/q5533660.html?order=DESC&by= …
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。、
残念ながら当方のマシンではブラウザ設定の拡大率のままでした。

お礼日時:2010/08/23 23:55

このQ&Aと関連する良く見られている質問

QJSで子ページから親ページのラジオボタンのチェック

JS初心者です。
サブページのボタンを押して、親ページのラジオボタンにチェックを入れたいのですが...
セレクトボタンでは何とかなったのですが、どうしてもラジオボタンで対応したいのです。
どうかご教授お願いいたします。

親画面
<script type="text/javascript">
<!--
function bodyOpn(value){
window.open("size.html");
url=value;
}
var url;
//-->
</script>


<body>
<form method="post" name="myForm" onSubmit="return check()" target="_top">

<span id="selection01" title="bodystyle" onmouseout="spanOff()"> スタイル<sup>*</sup><a href="javascript:bodyOpn('selection01')">サイズ表</a><br>
<label title="slim">
<input type="radio" name="selection01" onchange="changeBody(this)" value="slim" />
SLIM(スリム)</label><br />
<label title="reguler">
<input type="radio" name="selection01" onchange="changeBody(this)" value="reguler" />
REGULER(標準)</label><br />
</span>

</form>
</body>



サブ画面(size.html)
<script language="javascript">
<!--
function btn(n) {
var bodyNo = n
var btnImage = document.getElementById(bodyNo).innerHTML;
window.opener.document.myForm.option01.selectedIndex=n;
window.close();
}
//-->
</script>

<body>
<a href="javascript:body('1')" id="1">スリム</a>
<a href="javascript:body('2')" id="2">レギュラー</a>
</body>

JS初心者です。
サブページのボタンを押して、親ページのラジオボタンにチェックを入れたいのですが...
セレクトボタンでは何とかなったのですが、どうしてもラジオボタンで対応したいのです。
どうかご教授お願いいたします。

親画面
<script type="text/javascript">
<!--
function bodyOpn(value){
window.open("size.html");
url=value;
}
var url;
//-->
</script>


<body>
<form method="post" name="myForm" onSubmit="return check()" target="_top">

<span id="selection01" title="bod...続きを読む

Aベストアンサー

なんかつっこみどころがかなりあるのですが
とりあえずsize.htmlのbody(?)関数をこんな風にしてはどうでしょう?

function body(n) {
opt=window.opener.document.myForm.selection01[parseInt(n)-1].checked=true;
window.close();
}

QJQueryリストタグへのページネーション 現在のページ番号を表示

jquery初心者です。リストタグを使用したhtmlコンテンツにページャーを付けたいと考えております。
プラグインを色々と探しましたが希望に合うものが見つからず、一番近いものをどうにかカスタムして使えないかと思い投稿いたしました。

ページャー部分をなるべくコンパクトにしたいため、prev/nextボタンと現在表示しているページ番号のみを表示できるものが理想です(またはprev,nextボタンのみ)

例 < 2 >

現在のjqueryの記述は下記のようになっております (記述が長いためjs doitにjava,htmlともに記載)


http://jsdo.it/minatoakm3/Q0BU


はたしてこちらを使用してこのようなページャーを作ることは可能でしょうか?


なにぶん知識がないため元の記述をどのように削除・修正してよいかわからず途方に暮れております。
ご教授宜しくお願いいたします。

Aベストアンサー

こんにちは
私の環境が、js doitをキチンとみられない環境なので、ちゃんと確認したわけではないのですが・・・


ご利用のスクリプトはライブラリ化されているようで、オプション指定で見え方や機能を制御できるようになっているものと想像されます。
配布元サイトがわかりませんが、そのサイトにオプション等の説明がありませんでしたでしょうか?
わざわざカスタマイズしなくても、それを利用することでご質問の内容のかなりの部分は対応可能ではないかと想像しますが。
(スクリプトを解析して調べるのは面倒なので…あくまでも想像です。)


一方で、ご質問程度の内容であれば、機能限定にすればそれほど複雑にはなりませんので、以下にサンプル的なものを作成してみました。
※ #articles内のリストの各項目(LI)を1ページとして考えています。
※ クラスpaginationの要素内にページネーションが作成されます。
 (複数あっても可)
※ ページの両端ではprev、nextの表示にdisabledクラスを付与しています。
 (サンプルではCSSでグレー表示でカーソルは通常になるようにしています)
※ スクリプトの最初のprevText、nextTextを変えれば表示テキストが変わります。
※ 1ページ分の表示でスクロールが発生することはないと想定していますが、必要な場合は該当項目のtopへスクロールする方がよいのかも知れません。(コメントアウトの行がその機能になっています)
※ おまけとして、ページ内から他のページへのリンクを可能にしてあります。
 (HTMLを見ればわかりますが、リンク先を#pageNo○○のように指定します)

以下、ご参考まで。
(インデントを全角空白にしてあるので半角に戻してください)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
#articles { margin:0; padding:0; list-style-type:none;}
#articles>li { width:600px; height:400px; background-color:#DFD; }

.pagination { color:black; font-weight:bold; }
.pagination .prev, .pagination .next { cursor:pointer; }
.pagination .disabled { color: #BBB; cursor:auto; }
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>

<script type="text/javascript">
$(function(){
 var prevText = "&#60;", nextText = "&#62";
 var disabl = "disabled";

 var articles = $("#articles>li").hide();
 var current, pageMax = articles.length -1;
 var page = $(".pagination").html("");

 var prev = $("<span>").appendTo(page);
 prev.html(prevText + " ").addClass("prev");
 var pageNo = $("<span>").appendTo(page).addClass("pageNo");
 var next = $("<span>").appendTo(page);
 next.html(" " + nextText).addClass("next");

 var setPage = function(n){
  if( n<0 || pageMax<n ) return;
  var elm = articles.hide().eq(n).show();
//  $(window).scrollTop( elm.offset().top );
  pageNo.html( 1 * n + 1 );
  current = n;
  0==n? prev.addClass(disabl): prev.removeClass(disabl);
  pageMax==n? next.addClass(disabl): next.removeClass(disabl);
 }

 prev.on("click", function(){ setPage(current-1);});
 next.on("click", function(){ setPage(current+1);});
 setPage(0);

//以下おまけ(削除可能)
 $("#articles").on("click", "a", function(e){
  if(n = /^#pageNo(\d+)$/.exec($(e.target).attr("href"))){
   setPage(n[1] - 1);
   return false;
  }
 });
});
</script>
</head>
<body>
<div class="pagination"></div>

<ul id="articles">
<li>*** 1 ***
<p><a href="#pageNo6">6ページへ</a>
</li>
<li>*** 2 ***</li>
<li>*** 3 ***</li>
<li>*** 4 ***</li>
<li>*** 5 ***</li>
<li>*** 6 ***
<p><a href="#pageNo1">1ページへ</a>
</li>
</li>
</ul>

<div class="pagination"></div>
</body>
</html>

こんにちは
私の環境が、js doitをキチンとみられない環境なので、ちゃんと確認したわけではないのですが・・・


ご利用のスクリプトはライブラリ化されているようで、オプション指定で見え方や機能を制御できるようになっているものと想像されます。
配布元サイトがわかりませんが、そのサイトにオプション等の説明がありませんでしたでしょうか?
わざわざカスタマイズしなくても、それを利用することでご質問の内容のかなりの部分は対応可能ではないかと想像しますが。
(スクリプトを解析して調べるのは面倒...続きを読む

QHTML5 canvasで文字幅に合わせて拡大

・HTML5 canvasで以下のようなことをやりたいのですが、可能でしょうか?
・もし可能ならどうやるのでしょうか?

■前提
・canvas設定。width10px
・canvas2Dオブジェクト取得
・文字「hogehoge」表示

■やりたいこと
・この時、テキスト内容の文字幅に応じて、表示幅を広げ、全てを表示させるためにはどうすれば良いでしょうか?

■分からないこと
・テキスト内容を全て表示させるためには、canvas2Dオブジェクトのwidthを変更するのでしょうか?
・それとも、canvasのwidth自体を変更するのでしょうか?
・canvasのwidthより、canvas2Dオブジェクトのwidthが大きかったらどうなるのでしょうか?

Aベストアンサー

>canvasのwidthより、canvas2Dオブジェクトのwidthが大きかったらどうなるのでしょうか?
何もおきません。canvas2Dに概念上の制限はないはずなので、canvasの領域でトリミングされるだけです。

>それとも、canvasのwidth自体を変更するのでしょうか?
描画してからcanvasのサイズを変更すると、座標の対応関係が変わるのでご質問の意図のようなことにはならないと思います。
無理やりやるなら、サイズを先にセットしてから再描画するか、canvas要素をoverflow:hiddenのDIVなどでラップしておいてそちらのサイズを変更することでコントロールするかでしょう。
canvasに描画した内容は図化されるので、サイズを調べたいのであれば、スクリプトでスキャンしてサイズを調べることになるでしょう。

でも、扱う対象がテキストであるのなら、そんな面倒なことをしなくても、HTMLのspan要素やdiv要素を利用した方が遥かに扱いが簡単だと思いますが・・・

Q小さい写真にマウス置くと拡大される写真のコードについて質問があります。

javascriptについて。小さい写真にマウス置くと拡大される写真のコードについて
よろしくおねがいします

小さい写真にマウス置くと拡大される写真のコードについて質問があります。

下記のURLに全て写真付きで質問内容が書いています。どうぞご回答よろしくおねがいします。

http://nb-nobrand.chu.jp/

コードは下記です

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.10.0 for Windows">


<script type="text/javascript"><!--
function myChgPic(myPicURL){
document.images["myBigImage"].src = myPicURL;
}
// --></SCRIPT>

<TABLE>
<TR><TD colspan="4" align="center"><IMG src="写真入ります " width="480" height="600" name="myBigImage"></TD></TR>

<TR>

<TD><A href="javascript:void(0)" onmouseover="myChgPic( '写真入ります ' )"><IMG src="写真入ります " width="150" height="100"></A></TD>
<TD><A href="javascript:void(0)" onmouseover="myChgPic( '写真入ります ' )"><IMG src="写真入ります " width="150" height="100"></A></TD>
<TD><A href="javascript:void(0)" onmouseover="myChgPic( '写真入ります ' )"><IMG src="写真入ります " width="150" height="100"></A></TD>
<TD><A href="javascript:void(0)" onmouseover="myChgPic( '写真入ります ' )"><IMG src="写真入ります " width="150" height="100"></A></TD>


</TR>
</TABLE>



よろしくお願いします。

javascriptについて。小さい写真にマウス置くと拡大される写真のコードについて
よろしくおねがいします

小さい写真にマウス置くと拡大される写真のコードについて質問があります。

下記のURLに全て写真付きで質問内容が書いています。どうぞご回答よろしくおねがいします。

http://nb-nobrand.chu.jp/

コードは下記です

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.10.0 for Windows">...続きを読む

Aベストアンサー

勘違いだったらすみません。
これってjavascriptの質問というよりhtmlの質問ですよね?

4列1行→4列2行
trで列をつくってtdでセルをつくればよいかと
たとえばこう

<TABLE>
<TR>
<TD colspan="4"><IMG src="001_l.jpg" name="myBigImage"></TD>
</TR>
<TR>
<TD><A href="#" onmouseover="myChgPic('001_l.jpg')"><IMG src="001_s.jpg"></A></TD>
<TD><A href="#" onmouseover="myChgPic('002_l.jpg')"><IMG src="002_s.jpg"></A></TD>
<TD><A href="#" onmouseover="myChgPic('003_l.jpg')"><IMG src="003_s.jpg"></A></TD>
<TD><A href="#" onmouseover="myChgPic('004_l.jpg')"><IMG src="004_s.jpg"></A></TD>
</TR>
<TR>
<TD><A href="#" onmouseover="myChgPic('005_l.jpg')"><IMG src="005_s.jpg"></A></TD>
<TD><A href="#" onmouseover="myChgPic('006_l.jpg')"><IMG src="006_s.jpg"></A></TD>
<TD><A href="#" onmouseover="myChgPic('007_l.jpg')"><IMG src="007_s.jpg"></A></TD>
<TD><A href="#" onmouseover="myChgPic('008_l.jpg')"><IMG src="008_s.jpg"></A></TD>
</TR>
</TABLE>

また上の画像をしたにいどうするならこう

<TABLE>
<TR>
<TD><A href="#" onmouseover="myChgPic('001_l.jpg')"><IMG src="001_s.jpg"></A></TD>
<TD><A href="#" onmouseover="myChgPic('002_l.jpg')"><IMG src="002_s.jpg"></A></TD>
<TD><A href="#" onmouseover="myChgPic('003_l.jpg')"><IMG src="003_s.jpg"></A></TD>
<TD><A href="#" onmouseover="myChgPic('004_l.jpg')"><IMG src="004_s.jpg"></A></TD>
</TR>
<TR>
<TD><A href="#" onmouseover="myChgPic('005_l.jpg')"><IMG src="005_s.jpg"></A></TD>
<TD><A href="#" onmouseover="myChgPic('006_l.jpg')"><IMG src="006_s.jpg"></A></TD>
<TD><A href="#" onmouseover="myChgPic('007_l.jpg')"><IMG src="007_s.jpg"></A></TD>
<TD><A href="#" onmouseover="myChgPic('008_l.jpg')"><IMG src="008_s.jpg"></A></TD>
</TR>
<TR>
<TD colspan="4"><IMG src="001_l.jpg" name="myBigImage"></TD>
</TR>
</TABLE>

勘違いだったらすみません。
これってjavascriptの質問というよりhtmlの質問ですよね?

4列1行→4列2行
trで列をつくってtdでセルをつくればよいかと
たとえばこう

<TABLE>
<TR>
<TD colspan="4"><IMG src="001_l.jpg" name="myBigImage"></TD>
</TR>
<TR>
<TD><A href="#" onmouseover="myChgPic('001_l.jpg')"><IMG src="001_s.jpg"></A></TD>
<TD><A href="#" onmouseover="myChgPic('002_l.jpg')"><IMG src="002_s.jpg"></A></TD>
<TD><A href="#" onmouseover="myChgPic('003_l.jpg')"><IMG src="003_s.jpg...続きを読む

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード


このQ&Aを見た人がよく見るQ&A

このカテゴリの人気Q&Aランキング

おすすめ情報