Iframe somehow not working (shows as a blank page) - html

i just get into a small problem.
i tried to include iframe inside and also outside of div code but nothing show
adding like frameborder="0",etc didn't work either
then i tried on another .html file to make sure the iframe is good and it's showing like usually.
so why the iframe won't opened the src file, did i do something wrong ?.
heres my code (the problematic one):
<html>
<head>
<title>Buat.in</title>
</head>
<body class="container">
<div>
<div class="additional-ui">
</div>
<div>
<iframe src="backgroundui.html">
</iframe>
</div>
<div class="ui-bttnmenu">
<ul>
<li>Tentang
</li>
<li>Daftar Desain
</li>
<li>Lokasi
</li>
<li>Hubungi
</li>
</ul>
</div>
<footer class="foot-ui">
<p>Designed & Written by :</p>
and also i haven't applying the separate style file here, the class="" will be linked to my style later, i test it on firefox 85.0.1 ubuntu.
(Edit) heres the additional info for backgroundui.html:
<html>
<body class="secondary-ui-container">
<h1>Buat.in</h1>
<p>Your "trusted designer"</p>
</body>
</html>
fun fact theres something happened, when i run iframe inside the background.html (supposed to be the ui) the iframe works normally else on the main page.
or should i rebuild all from zero again ?.

Firefox has recently implemented a security feature which does not allow cross tab tracking which is the fundamental of iFrame. Previously, this feature only prevented only https and ssl certified sites.
You may change this behavior in your own Firefox installation by typing about:config in the address bar and setting security.mixed_content.block_active_content to false.
Here are some more docs about x-frame-options:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

Related

Why is the web page html element (absolute xpath) dissapeared when downloaded as html file? what cause it?

First, let's set up a code for full-xpath:
(focus) for /html/body/div[2]/div/div[1]/div[3]/div/div
(sub-focus) for /html/body/div[2]/div/div[1]/div[3]/div/div[2]
Tool to use:
Online Inspector: Chrome or Firefox (any of them will gives the same result)
Offline Inspector: any code-editor, I personally use Sublime-text
HTML prettifier to visually tidy up the downloaded html (optional)
Cases
piece of structure from non-downloaded html on the chrome browser web-inspecting tool
▼<div class="BrandPageWrapper-liveAlertAd BrandPageWrapper-contentWrapper" role="main" id="MainContent Container"> = $0
<p id="MainContent" tabindex="-1"></p>
▼<div class="QuotePageBuilder-container">
►<div class="BadgeGroup-badgeGroup">...</div> (focus)
►<div class="QuotePageBuilder-row">...</div> (sub-focus)
</div>
</div>
►<div id="MobileAdhesion-Homepage" class="MobileAdhesion-container" data-module="mps-slot">.</div>
piece of stucture from downloaded html on code-editor (cannot use chrome inspector, something prevent it to show the full content, preventing the user from scraping the data)
▼<div class="BrandPageWrapper-liveAlertAd BrandPageWrapper-contentWrapper" role="main" id="MainContentContainer">
<p id="MainContent" tabindex="-1"></p>
▼<div class="QuotePageBuilder-container">
▼<div class="QuotePageBuilder-row">...</div> (sub-focus)
As you can see, the (focus) is missing from the html, If I tried to search the BadgeGroup-badgeGroup class in the html document, I gone zero result
questions:
Why is it gone?
Where is it gone to?
bonus-question:
In chrome browser Inspector search element plugin both /html/body/div[2]/div/div[1]/div[3]/div/div[2]/div[1]/div[2]/div[3]/div/div[2]/span[1] and /html/body/div[2]/div/div[1]/div[3]/div/div/div[1]/div[2]/div[3]/div/div[2]/span[1] pointing at the same element inside the (sub-focus), why?
source
Almost certainly the HTML source of the web page does not contain the HTML concerned (the piece you describe as "gone" in the downloaded file), and it's actually generated in the browser by JavaScript.

How to fix ahref not linking to the id

I'm creating a table of contents using the id linking method. How do I get it to work properly? I've triple checked and for some reason, it's not responding when I click on the link.
I've tried creating an id and name within the tag. It only seems to work for the top of page id. I'm using Shopify's blog editing feature which accepts HTML.
1. Example
<h3 id="Test">My Header Here</h3>
I've got it to work before but it's not anymore. Maybe I have to clear my cache?
you just add height at your tag
for example
<html>
<head>
</head>
<body>
<div style="height:600px">
1. Example
</div>
<div style="height:600px">
<h3 id="Test">My Header Here</h3>
</div>
</body>
</html>
The code is correct.
What happens if you try the code below instead? Both of these should be valid, so it would be weird that one works and the other doesn't.
1. Example
<a name="Test"><h3>My Header Here</h3></a>

HTML local anchor doesn't work, web page is not reloaded

Greeting,
I am trying to use local anchor in a web page, but it doesn't work. The local anchor's URL like this:
https://hostname:port/info?newElement=true#a
If I use this URL to load the web page directly, I can see the web page is located in the correct position where the local anchor is. But if I click the hyper link in the web page, nothing happens, though I can see the URL is correct in the footer when I hover mouse on the hyper link.
The web page is not reloaded and the URL in the browser's address box is not changed to the URL with "#a" at end. Is it due to the web page is an active web page?
Below is the code sample:
"form.jsp":
<div>
<div>
<jsp:include page="form-nav.jsp" />
<div>
<jsp:include page="form-location.jsp" />
....
</div>
</div>
</div>
"form-nav.jsp":
<div>
<ul class="tab">
<li>
Name
</li>
....
</ul>
<div>
"form-location.jsp":
<div id="location" class="page">
...
</div>
Thanks,
Zhe
DEMO
Here is an example of how to use the anchor tag.
Anchor syntax:
Link text
Referenced Element:
<div id="someid">You content goes in here</div>
everyone,
by further codes reading, I found the problem now. There is a override of the hyper link's click behavior in a js file:
$("body..... ul.tab li a").on('click', function() {
...
return false;
})
By deleting this override logic, the local anchor works well now. Thanks a lot for your comments!

Code being removed in browser after file uploaded

I'm trying to add the facebook like button, have follwed the steps from the Fb developers site, placed it where it needed to be, tried various other solutions for the like button not showing up. Can some one please explain why after I upload the file to the server, then look at the source code in the browser the code for the facebook like button is no longer there? Even the entire div tag surrounding the code is missing. When I look at the file that is on the server it contains the code for the button but the browser doesn't seem to recognize it.
I have read about having to create an API key(app ID), but have also heard it's not necessary.
Also, if the facebook account has settings like Country restrictions, it could mess up whether the button shows but the page I'm trying to set is to like a facebook page on another site. What am I missing?
Please help!
Here's what I have in code:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
some more stuff in the body...
<div class="sideFigures">
<div class="like">
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FEntertainmentIndustryIntroductionConvention&send=false&layout=button_count&width=150&show_faces=false&font=verdana&colorscheme=light&action=like&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>
</div>
<img src="images/eiic figures.png" width="252" height="497" /> </div>
but when I look at source code from browser (in this example from IE), this is what I see:
<html xmlns="http://www.w3.org/1999/xhtml">
and the div containing the like button...
<div class="sideFigures"><img src="images/eiic figures.png" width="252" height="497" /></div>

html - how to load another page in the middle of first page

i have embarrassing question concerning to elementary knowledge of HTML
I would like Open/load second page in my first page
Menu button which loads second page -
<li class="current">About us</li>
part of my firstpage is called "myContent" but (Opening of second page) doesn´t work properly (Page is opened in another Window)
<div id="myContent" name="myContent" style="background-color:#EEEEEE;height:200px;width:800;float:left;"> </div>
What amI doing wrong? Thanks
You should replace your div#myContent with an iframe:
<iframe id="myContent" name="myContent" style="background-color:#EEEEEE;height:200px;width:800;float:left;"> </iframe>
You may need to add some additional styling here.
Or you can use AJAX to load content with JS.
Use this instead of the div
<iframe id='myContent'></iframe>