這裏是我的javascript來調整iframe中，需要一些編輯

這裏是我的iframe這是一個div裏面有按鈕這裏是我的javascript來調整iframe中，需要一些編輯

\t function myFunction() { 
 
    \t var url =document.getElementById("myFrame").getAttribute("src"); 
 
    \t var newUrl = url.substring(0,url.indexOf("width")) + "width=320&height=270"; 
 
    \t document.getElementById("myFrame").setAttribute("src",newUrl); 
 
    \t document.getElementById("myFrame").setAttribute("style","border:none;overflow:hidden;width:320px;height:270px;"); 
 
     }

<div style="width:auto;height:auto;" id="mydiv"> 
 
    
 
     <iframe id="myFrame" src="http://domain.com/page.php?width=400&height=400" height="400" width="400"></iframe> 
 
    
 
    </div> 
 
    
 
    <button onclick="myFunction()">Change Size</button>

我需要的，這裏是我的代碼工作將改變iframe的大小它的src鏈接是大小。但正如你看到的，我的ID爲「mydiv」的div具有樣式寬度和高度是自動的。我需要我的代碼在寬度和高度上都是100％全寬，當我使窗口變大時，div的大小會增加，但iframe不會因爲它具有固定的大小而發生更改。

我已經試過

("style","border:none;overflow:hidden;width:100%;height:100%;") 

("width")) + "width=100%&height=100%"

，但它不能正常工作。要麼iframe搞砸了，但不能正常工作。希望你明白我真的需要幫助。

來源

2017-02-24 Mm Pp

**編輯**

事實證明，我完全誤解了這個問題。你希望IFrame的內容填充IFrame？我認爲你不能做你想做的事。

如果您需要調整一個IFrame裏面的內容：

編輯iframe中頁面的CSS。
如果IFrame內容與您的父級具有相同的域名，那麼您可以使用JavaScript訪問其DOM並進行操作。

這些都不適用於您的代碼示例。

我在片段中使用了一些CSS3，這使得內容看起來更大。也許這樣可能會有幫助？

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <style> 
 
      html, body { width: 100%; height: 100%; padding:0; margin:0; } 
 
      
 
      #div { 
 
       width: 600px; 
 
       height: 600px; 
 
       padding: 0; 
 
       
 
      } 
 
      
 
      #iframe { 
 
       width: 480px; 
 
       height: 480px; 
 
       border: 1px solid black; 
 
       
 
       transform: scale(1.25); 
 
       transform-origin: 0 0; 
 
       
 
       /* browser compatibility */ 
 
       -webkit-transform: scale(1.25); 
 
       -webkit-transform-origin: 0 0; 
 
       -moz-transform: scale(1.25); 
 
       -moz-transform-origin: 0 0; 
 
       -o-transform: scale(1.25); 
 
       -o-transform-origin: 0 0; 
 
       -ms-zoom: 1.25;   
 
      } 
 
      
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div id="div"> 
 
      <iframe id="iframe" src="http://domain.com/page.php"></iframe><br /> 
 
     </div>  
 
     
 
     <!-- uncomment to view the original size of the content inside the iframe --> 
 
     <!-- 
 
     <iframe id="myFrame" src="http://domain.com/page.php?width=400&height=400" height="600" width="600"></iframe> 
 
     --> 
 
    </body> 
 
</html>

來源

2017-02-24 04:03:21

親愛的代碼工作，但src鏈接是不是完整的寬度和高度與div。它是固定大小的寬度= 320和高度= 270 –

如果我使它'page.php？width = 100％＆height = 100％'它不起作用 –

更新iframe網址爲：page.php？width = 100％＆height = 100％不會對iframe做任何事情，它只會改變在iframe中呈現的內容。將iframe上的樣式設置爲： style =「none; overflow：hidden; width：100％; height：100％;」 –

根據內容處理iframe大小通常很複雜，我建議使用第三方解決方案，如https://davidjbradshaw.github.io/iframe-resizer/（我與它沒有關係，但我已經使用了好幾次，根本沒有問題）。

您可以嘗試一下，看看是否適合您的需求。

希望這有助於

來源

2017-02-24 03:53:58

如果我們談論的是純JavaScript，下面的例子應該能正常運行。

// Select your button 
var button = document.getElementById("button"); 

// Button event listener for click 
button.addEventListener("click", myFunction); 

// Button function 
function myFunction() { 
    document.getElementById("myFrame").style.cssText = 'width: 600px !important; height: 600px !important;'; 
}

我測試了代碼JSFiddle。一探究竟。

我認爲你太過關注iFrame了。你必須關注你可以使用的東西。在這種情況下，嘗試修改url屬性將不會執行任何操作，因爲這不是控制iframe寬度和高度的操作。

元素控制自身的外觀。所以你必須使用CSS或iFrame提供的屬性。在這種情況下，我選擇通過JavaScript使用CSS。

，因爲用戶指定的JavaScript和它看起來像他或她沒有在代碼實現的任何地方我沒有提供一個jQuery或第三方解決方案。

但招待的思想，這裏是一個jQuery的解決方案：

$('#button').click(function() { 
    $('#myFrame').css("cssText", "width: 600px !important; height: 600px !important;"); 
});

更清潔的方法！

來源

2017-02-24 03:54:32

非常感謝您的ARD的工作，但你的代碼只適用於調整的iframe，但不是鏈接。我知道你說過「試圖修改url屬性不會做任何事情，因爲這不是什麼控制iframe的寬度和高度」，但親愛的我需要代碼來調整大小鏈接也是我在這裏指定'page.php？width = 400＆height = 400'的寬度和高度。因爲iframe上的某些頁面不會自動調整鏈接大小。喜歡youube視頻，我只需要調整其大小iframe不需要其src鏈接。 –

這裏是我的javascript來調整iframe中，需要一些編輯

回答

相關問題