Kayıtlı dosyanızın, tam olarak kaydettiğiniz canlı web sitesine benzememesi için (en az) iki neden vardır:
- Sayfadaki görüntülere olan bağlantıların bazıları veya birçoğu "göreceli" bağlantılar olabilir. Benzer şekilde, sayfadaki ".css" ve ".js" dosyalarına bağlantılar "göreceli" bağlantılar olabilir.
- Resimlere ve diğer dosyalara bazı bağlantılar bu ".css" ve ".js" dosyalarının içinde bulunabilir.
Örneğin, bir sayfaya baktığınızı varsayalım:
http://example.com/something/index.php
Bu sayfada, bir resim dosyasına "göreceli" link var:
"../images/picture.jpg"
Ayrıca bu sayfada bir .css dosyasına bir "göreceli" link:
"../css/style.css"
Bu nedenle, sayfa için ".html" dosyasını kaydettiğinizde, bu "göreceli" bağlantıları içerir. Tarayıcınızda kaydedilmiş sayfanızı açtığınızda, bu görüntü ve css dosyalarını .html dosyasını kaydettiğiniz klasörde arar. Bu görüntü ve css dosyaları .html dosyasını kaydettiğiniz klasörde değilse, sayfa düzgün görüntülenmez.
Bunu "çözmek" için yapabileceğiniz birkaç şey var.
File-->Save as...-->Webpage, completeWeb sayfasını bilgisayarınıza kaydederken seçin (veya benzer ifadeler). Bu, görüntünün ve .css / .js dosyalarının bir kopyasını bilgisayarınıza kaydeder ve bilgisayarınızdaki görüntü / dosyayı gösterecek şekilde kaydedilen html dosyasındaki bağlantıyı değiştirir. Bu "kusursuz" değildir. Bu işlem sık sık bazı dosyaları "özlüyor" gibi görünüyor. Bu durumda, eksik dosyaları manuel olarak bulup indirmeniz ve kaydedilen html dosyanızdaki bağlantıları, bilgisayarınızda kaydedilen dosyaları "işaret etmek" için el ile düzenlemeniz gerekecektir.- Html dosyasını "Web arşivi" dosyası olarak kaydedin (".mht")
<head>Html dosyasının kaydedilmiş kopyasındaki bölüme bir "base href ..." satırı ekleyin . Yukarıdaki URL'yi örnek olarak kullanmak:
http://example.com/something/index.php
"İndex.php" yi web sayfasının URL'sinden çıkarın size verir:
http://example.com/something/
Bunu, web sayfasının kaydedilmiş kopyasındaki <head> bölümüne ekleyin.
<Head>
<base href = "http://example.com/something/">
<...>
<...>
</ Head>
...
Düzenleme (2013-04-04):
Internet Explorer'ı kullanarak, sayfadaki JavaScript'in "sonucunu" da kaydeden bir sayfayı kaydetmenin en iyi yolu (belki de mükemmel değildir), Microsoft Geliştirici Araçları'nı kullanmak ve ardından sayfa için DOM kaynağını görüntülemek ve saklamaktır.
"Belki de mükemmel değil" diyorum ...
Web sayfasına bir resim ekleyen HTML kodu "oluşturmak" için JavaScript kullanan bir web sayfanız olduğunu varsayalım.
Web sayfasını çevrimiçi görüntülerseniz, resmi görürsünüz. Sayfa kaynağını ( View-->Source) görüntüler veya sayfa kaynağını bir dosyaya ( File->Save as...) kaydederseniz , JavaScript’i göreceksiniz, ancak HTML <img...>kodunu görmeyeceksiniz .
Şimdi, sayfanın DOM kaynağını görüntülemek ve kaydetmek ve ardından kaydedilen dosyayı bir metin düzenleyicide açmak için Geliştirici Araçları'nı kullanırsanız, orijinal JavaScript’in kaydedilmiş dosyaya dahil edildiğini ve ardından JavaScript’in altında olduğunu göreceksiniz. <img...>JavaScript tarafından oluşturulan kodu görün .
Ardından, kaydedilen sayfayı bir tarayıcıda açarsanız, resmi iki kez göreceksiniz. Bunun nedeni, kaydedilen sayfayı açtığınızda, JavaScript'in tekrar yürütülmesi ve görüntüyü göstermek için kod üretmesi ve bunun altında da dosyanın üzerine kaydedilen görüntünün HTML kodu olmasıdır.
Kaydedilen DOM kaynağını düzenleyerek bunu "düzeltebilir" ve ardından JavaScript'i kaldırabilir (veya yorum yazabilirsiniz). Ardından kaydedilen sayfayı bir tarayıcıda açtığınızda, resmi yalnızca bir kez göreceksiniz.
Düzenleme (2013-04-05):
Göreceli bağlantılar içeren web sayfalarının tarayıcıdan kaydedilmesi ile ilgili bazı karışıklıklar olabilir, bu yüzden çalışan bir örnek vermeye karar verdim.
İşte bunu göstermek için oluşturduğum bir web sayfası:
Waterfall-Lighthouse resimleri
İşte o sayfanın HTML kodu:
<Html>
<Head>
<title> Şelale ve Deniz Feneri </title>
</ Head>
<Body>
<img src = "../ görüntüler / imagesCAIPHDL5.jpg" /> <br />
<br /> <hr align = "left" width = "284" /> <br />
<script type = "text / javascript"> document.write ("\ n" + '<img src = "../ görüntüler / imagesCAG7M85E.jpg" /> <br />'); </script>
</ Body>
</ Html>
Sayfayı tarayıcıda görüntülüyorsanız (IE9 kullanıyorum), beklenen web sayfasını 2 resimle doğru şekilde görürsünüz.
Sayfayı görüntülerken, sayfanın kaynağını tıklatarak View-->Sourceveya
tıklatarak kaydedebilirsiniz File-->Save as...-->Webpage, HTML only. Sonra dosyayı kaydedin. Her iki durumda da aynı HTML kodunu alırsınız:
<Html>
<Head>
<title> Şelale ve Deniz Feneri </title>
</ Head>
<Body>
<img src = "../ görüntüler / imagesCAIPHDL5.jpg" /> <br />
<br /> <hr align = "left" width = "284" /> <br />
<script type = "text / javascript"> document.write ("\ n" + '<img src = "../ görüntüler / imagesCAG7M85E.jpg" /> <br />'); </script>
</ Body>
</ Html>
Ancak, kaydedilen dosyayı tarayıcıda görüntülerseniz, resimsiz boş bir sayfa alırsınız. Bunun nedeni, kaydedilen dosyadaki resim bağlantısının ve JavaScript tarafından yazılan resim bağlantısının her ikisinin de "göreceli" bağlantılar olması ... tarayıcının resimleri nerede bulacağına etki alanı veya yolunu söyleyememesidir. Burada neye benzediğini görebilirsiniz: Yalnızca
Kaynağı Görüntüle
HTML
Bu kayıtlı dosyayı düzenlerseniz ve satır eklerseniz:
<base href = "http://viewthis.info/superuser577187/page/">
dosya şöyle görünecek:
<Html>
<Head>
<title> Şelale ve Deniz Feneri </title>
<base href = "http://viewthis.info/superuser577187/page/">
</ Head>
<Body>
<img src = "../ görüntüler / imagesCAIPHDL5.jpg" /> <br />
<br /> <hr align = "left" width = "284" /> <br />
<script type = "text / javascript"> document.write ("\ n" + '<img src = "../ görüntüler / imagesCAG7M85E.jpg" /> <br />'); </script>
</ Body>
</ Html>
Şimdi, düzenlenmiş dosyayı tarayıcıda görüntülerseniz, her iki resmin de doğru şekilde görüntülendiği bir sayfa göreceksiniz. Bunun nedeni, "base href" satırının tarayıcıya "eksik" resimler için nereye bakacağını (etki alanı ve yol) bildirmesidir. Burada neye benzediğini görebilirsiniz:
Source-with-base-href
Sayfayı çevrimiçi olarak görüntülerken, sayfanın kaynağını aşağıdakilere tıklayarak da kaydedebilirsiniz
File-->Save as...-->Webpage, complete.
Bu kaydedilen dosyanın kaynağını görüntülerseniz, şu HTML kodunu göreceksiniz:
<! - url'den kaydedildi = (0042) http://viewthis.info/superuser577187/page/ ->
<Html>
<Head>
<title> Şelale ve Deniz Feneri </title>
<meta content = "text / html; charset = windows-1252" http-equiv = İçerik Türü>
<meta name = GENERATOR content = "MSHTML 9.00.8112.16470">
</ Head>
<Body>
<img src = "Şelale ve Deniz Feneri_dosyaları / imagesCAIPHDL5.jpg" /> <br />
<br /> <saat hizası = sol genişlik = 284 /> <br />
<script type = text / javascript> document.write ("\ n" + '<img src = "../ görüntüler / imagesCAG7M85E.jpg" /> <br />'); </script>
</ Body>
</ Html>
Kaydedilen bu dosyayı tarayıcıda görüntülüyorsanız, ilk (üstte) resmin doğru görüntülendiği bir sayfa alırsınız, ancak ikinci resim görüntülenmez (eksik). Bunun nedeni, kaydedilirken Webpage, completetarayıcının ilk görüntünün bir kopyasını sabit diskinize kaydetmesi ve görüntünün yerel kopyasını göstermesi için kaydedilen dosyadaki bağlantıyı değiştirmesidir. İkinci resmin resim bağlantısı kaydedilen dosyada yok. İkinci görüntü bağlantısını oluşturan JavaScript kodu dosyaya kaydedilir, ancak gerçek bağlantı sayfanın kaynağının bir parçası değildir, bu nedenle ikinci görüntü bağlantısı kaydedilmez ve ikinci görüntü dosyası da kaydedilmez.
Yine, bu kayıtlı dosyayı düzenlerseniz ve satır eklerseniz:
<base href = "http://viewthis.info/superuser577187/page/">
ve ardından düzenlenmiş dosyayı tarayıcıda görüntüleyin, her iki resmi de doğru görüntüleyen bir sayfa göreceksiniz.
Sayfayı çevrimiçi olarak görüntülerken başka bir yolla da kaydedebilirsiniz::
File-->Save as...-->Web Archive, single file-->Save.
Kaydedilmiş bu dosyayı tarayıcıda görüntülerseniz, her iki resmin de doğru şekilde görüntülendiği bir sayfa görürsünüz. Bunun nedeni, "Arşiv" biçiminin ilk görüntüyü arşiv dosyasının içine (kodlanmış) kaydetmesi ve web sayfasının (ve etki alanı adı / yolunun) bulunduğu yerin web adresini ve ikinci görüntü dosyasının kaydedilmesidir.
Tüm bu örnek durumlarda, ikinci görüntü bağlantısı olan JavaScript'in "sonucu" (JavaScript'in işlenmesinden sonraki sayfanın geçerli durumu), kaydedilen dosyada bulunmaz, yalnızca JavaScript kaydedilir.
Bu örneklerde, JavaScript'in "sonucunun", JavaScript'in neredeyse "önemsiz" bir kullanımı olan "basit" olduğunu unutmayın. "Gerçek" web sayfalarında, JavaScript çok karmaşık olabilir ve birçok sayfa oluşturabilir (yalnızca kullanılabilir bellek miktarıyla sınırlıdır).
Şimdi, sayfanın JavaScript'ten "sonuç" ile nasıl kaydedileceği. Bunu Microsoft Geliştirici Araçları'nı kullanarak yapacağız (indirme bağlantısı bu cevapta daha önce gösterilmiştir).
Geliştirici Araçları'nı yükledikten sonra ve sayfayı çevrimiçi olarak görüntülerken, tuşuna basın F12veya tıklayın:
Tools-->F12 Developer Tools
Ardından açılan pencerede: düğmesine tıklayın
View-->Source-->DOM (page).
Yeni bir pencere açılır. Tıklayın File-->Saveve ardından dosyayı kaydedin.
Bu kaydedilen dosyanın kaynağını görüntülerseniz, şu HTML kodunu göreceksiniz:
<Html>
<Head>
<title> Şelale ve Deniz Feneri </title>
</ Head>
<Body>
<img src = "../ görüntüler / imagesCAIPHDL5.jpg" /> <br />
<br /> <hr width = "284" align = "left" /> <br />
<script type = "text / javascript">
document.write ("\ n" + '<img src = "../ görüntüler / imagesCAG7M85E.jpg" /> <br />');
</ Script>
<img src = "../ görüntüler / imagesCAG7M85E.jpg" /> <br />
</ Body>
</ Html>
Bu kaydedilen dosyanın kaynağında, JavaScript'in kaydedildiğini ve JavaScript'in "sonucunun" kaydedildiğini göreceksiniz:
...
<script type = "text / javascript">
document.write ("\ n" + '<img src = "../ görüntüler / imagesCAG7M85E.jpg" /> <br />');
</ Script>
<img src = "../ görüntüler / imagesCAG7M85E.jpg" /> <br />
...
Sanırım istediğin bu. Ancak, iki sorun var.
Öncelikle, daha önce olduğu gibi, kaydedilen bu dosyayı tarayıcıda görüntülerseniz, resimsiz boş bir sayfa alırsınız. Bunun nedeni, kaydedilen dosyadaki resim linklerinin "göreceli" linkler olmaları ... tarayıcının resimleri nerede bulacağına etki alanı veya yolunu söyleyememesidir. Burada neye benzediğini görebilirsiniz:
DevTools-DOM
Yine, bu kayıtlı dosyayı düzenlerseniz ve satır eklerseniz:
<base href = "http://viewthis.info/superuser577187/page/">
ve ardından düzenlenmiş dosyayı tarayıcıda görüntüleyin, her iki resmi de gösteren sayfa alacaksınız. Burada neye benzediğini görebilirsiniz:
DevTools-DOM-with-base-href
Burada ikinci sorunu fark edeceksiniz. İlk resim (şelale) doğru şekilde (bir kez) gösterilir, ancak ikinci resim (Deniz Feneri) iki kez gösterilir. Bunun nedeni, kaydedilen sayfa yüklendiğinde, JavaScript ikinci resim için bir resim bağlantısı oluşturarak yeniden yürütülür ve ikinci resim için resim bağlantısı da dosyaya kaydedilir.
Bunu düzeltmek için kaydedilen dosyayı tekrar düzenlemeniz ve JavaScript'i kaldırmanız gerekir ( <script...> and </script>etiketleri ve aralarındaki her şeyi kaldırın ). Şimdi, düzenlenen
dosyanın kaynağı şöyle görünür:
<Html>
<Head>
<title> Şelale ve Deniz Feneri </title>
<base href = "http://viewthis.info/superuser577187/page/">
</ Head>
<Body>
<img src = "../ görüntüler / imagesCAIPHDL5.jpg" /> <br />
<br /> <hr width = "284" align = "left" /> <br />
<img src = "../ görüntüler / imagesCAG7M85E.jpg" /> <br />
</ Body>
</ Html>
Şimdi, kaydedilen dosya istediğiniz gibi JavaScript'in "sonucunu" içeriyor ve düzenlenmiş dosyayı tarayıcıda görüntülüyorsanız, her iki resimden yalnızca birinin doğru görüntülendiği bir sayfa göreceksiniz. Burada neye benzediğini görebilirsiniz:
DevTools-DOM-Final
Şimdi, bunların hepsi çok karmaşık görünebilir, ama aslında ...
Geliştirici Araçlarını indirip kurduktan sonra, sadece 4 basit adım var ... Kaydetmek istediğiniz sayfayı görüntülerken (tarayıcıda):
- Tuşuna basın
F12veya tıklayın:Tools-->F12 Developer Tools
- Açılan pencerede: seçeneğine tıklayın
View-->Source-->DOM (page).
- Yeni pencerede, tıklayın
File-->Saveve ardından dosyayı kaydedin.
- Kaydettiğiniz dosyayı düzenleyin ve "base href" satırını ekleyin ve dosyayı kaldırın.
<script...> ... </script>