Press "Enter" to skip to content

[Browser Mockup] Detect iFrame Embedding in Javascript | mockframe.js

MockFrame(mockframe.js) is a JavaScript plugin that designs the <iframe> elements in your web page like a browser mockup.

how to check if iframe exists, check if in iframe javascript, how to check iframe in website, check if page is in iframe jquery

How to make use of it:

1. Download the package and load the primary script right earlier than the closing body tag.

<script src="script.js"></script>

2. Embed an iframe into your doc.

<iframe src=" Add Website Link">
</iframe>

3. Initialize the library and complete it.

newMockFrame();

4. Override the default styles of the browser mockup.

iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
  display: block;
}

.window {
  border-radius: 9px;
  background-color: white;
  width: 100%;
  min-height: 100%;
  box-shadow: 0 0px 1.2px rgba(0, 0, 0, 0.021), 0 0px 2.7px rgba(0, 0, 0, 0.031),
    0 0px 4.6px rgba(0, 0, 0, 0.038), 0 0px 6.9px rgba(0, 0, 0, 0.044),
    0 0px 10px rgba(0, 0, 0, 0.05), 0 0px 14.2px rgba(0, 0, 0, 0.056),
    0 0px 20.1px rgba(0, 0, 0, 0.062), 0 0px 29.2px rgba(0, 0, 0, 0.069),
    0 0px 45px rgba(0, 0, 0, 0.079), 0 0px 80px rgba(0, 0, 0, 0.1);
}

.header {
  margin: 0px;
  background: #e8e8e8;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  height: 12px;
  padding: 12px;
}

.mockup-button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.red {
  background-color: #ff5f56;
}

.yellow {
  background-color: #ffc343;
  margin-left: 3px;
}

.green {
  background-color: #32a852;
  margin-left: 3px;
}

5. Enable the darkish mode.

newMockFrame({
  dark: true
});

6. Darken the browser buttons if needed.

newMockFrame({
  style: "darken"
});

Present iFrame In A Browser Mockup, MockFrame Plugin/Github


See Demo And Download

Official Website(khalby786): Click Here

This superior jQuery/javascript plugin is developed by khalby786. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *